Prettier与ESLint配合异常，如何调整配置实现预期Vue代码格式化？

问题 #

Prettier与ESLint配合出现冲突，Prettier格式化后的代码不符合预期，触发ESLint警告。

当前ESLint配置：

"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended"
  ],
  "parserOptions": {
    "sourceType": "module"
  },
  "rules": {
    "vue/no-mutating-props": [
      "error",
      {
        "shallowOnly": true
      }
    ],
    "vue/html-self-closing": [
      "error",
      {
        "html": {
          "void": "always"
        }
      }
    ]
  }
},

.prettierrc配置：

{
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "singleAttributePerLine": true,
  "tabWidth": 2,
  "overrides": [
    {
      "files": "*.scss",
      "options": {
        "singleQuote": false
      }
    }
  ]
}

Prettier格式化后的代码：

<template>
  <pre
    ref="board"
    class="border rounded w-100 text-white bg-dark p-1"
    style="height: 10rem; resize: vertical"
    >{{ robotActionData }}</pre
  >
</template>

触发的ESLint警告：

• Expected no line breaks before closing bracket, but 1 line break found
• Expected indentation of 2 spaces but found 4 spaces

期望的格式化效果：

<template>
  <pre 
    ref="board" 
    class="border rounded w-100 text-white bg-dark p-1" 
    style="height: 10rem; resize: vertical"
  >
    {{ robotActionData }}
  </pre>
</template>

解决方案 #

调整.prettierrc配置，解决标签闭合换行和内容缩进冲突问题：

1. 禁止标签闭合折行
   添加vueClosingBracketNewLine: false，阻止Prettier将闭合标签拆分为多行。

2. 忽略HTML空格敏感度
   添加htmlWhitespaceSensitivity: "ignore"，让Prettier尊重手动设置的内容缩进逻辑，避免和ESLint缩进规则冲突。

调整后的.prettierrc：

{
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "singleAttributePerLine": true,
  "tabWidth": 2,
  "vueClosingBracketNewLine": false,
  "htmlWhitespaceSensitivity": "ignore",
  "overrides": [
    {
      "files": "*.scss",
      "options": {
        "singleQuote": false
      }
    }
  ]
}

额外建议：为彻底消除ESLint和Prettier的规则冲突，安装eslint-plugin-prettier和eslint-config-prettier，并修改ESLint配置的extends字段：

"extends": [
  "plugin:vue/vue3-recommended",
  "eslint:recommended",
  "plugin:prettier/recommended"
],

内容的提问来源于stack exchange，提问作者Haidepzai