VSCode格式化Vue代码用什么规范_VSCode集成ESLint【详解】-VSCode-PHP中文网

vue项目vscode格式化需eslint、prettier、vetur（或@prettier/plugin-vue）协同：eslint校验修复js逻辑，prettier统一代码风格，vetur/插件处理template/style格式；eslint--fix对template无效因eslint不解析html；须用eslint-config-prettier禁用冲突规则，并配置codeactionsonsave触发修复。

vscode格式化vue代码用什么规范_vscode集成eslint【详解】

Vue 项目在 VSCode 中格式化代码，不能只靠 Prettier 或只靠 ESLint 单独干活——前者不理解 Vue 的 SFC（单文件组件）结构，后者默认不接管格式化逻辑。真正起作用的是三者协同：ESLint 负责校验 + 报错 + 修复可修复项，Prettier 负责统一格式，Vetur（或更现代的 @vue/eslint-config-prettier + eslint-plugin-vue）负责解析 .vue 文件中的 template/script/style 块。

为什么 `eslint --fix` 对 .vue 文件 template 部分无效

ESLint 默认只处理 JavaScript 内容。即使你配置了 "eslint.validate": ["vue"]，它也只是把整个 .vue 文件丢给 parser 解析，而原生 ESLint parser（如 @babel/eslint-parser）根本不会解析 <template></template> 里的 HTML 模板语法。

常见现象：eslint --fix 能修 script 里的缩进、分号、引号，但对 template 里属性换行、标签闭合、空格对齐完全没反应
根本原因：ESLint 不是 HTML 格式化工具，vue-eslint-parser 也只提取 script 部分供 ESLint 分析，template 交给 Vetur 或 Prettier 处理
解决方向：template 格式化必须由 Vetur（Vue 2）或 @prettier/plugin-vue（Vue 3）承担；script 和 style 则交由 ESLint + Prettier 联动

`prettier` 和 `eslint-plugin-prettier` 怎么配合才不打架

两者直接冲突的典型场景：ESLint 规则要求 semi: false（不加分号），但 Prettier 默认开启分号；或者 ESLint 要求单引号，Prettier 配置成双引号。结果就是保存时反复“修复→破坏→再修复”。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

关键动作：必须用 eslint-plugin-prettier 把 Prettier 规则转成 ESLint 规则，并放在 extends 链末端，确保它覆盖前面所有规则

正确配置示例（.eslintrc.js）：

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint-config-prettier', // 关闭所有和格式化冲突的 ESLint 规则
    'plugin:prettier/recommended' // 把 Prettier 规则作为 ESLint 规则启用
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error' // 显式开启，让报错可见
  }
}

绝对不能漏掉 eslint-config-prettier —— 它不是可选插件，而是“灭火器”，专门禁用 ESLint 自带的格式化类规则（比如 no-multiple-empty-lines、object-curly-spacing）

VSCode 设置里哪些字段决定“保存即格式化”的实际行为

VSCode 的 settings.json 是最终执行开关，配错一个就失效。重点看三个字段是否同时生效：

"editor.formatOnSave": true —— 启用基础格式化，但只调用当前语言的默认 formatter（Vue 文件默认是 Vetur，不是 ESLint）
"editor.codeActionsOnSave": {"source.fixAll.eslint": true} —— 这才是触发 ESLint 自动修复的关键；它和 formatOnSave 是两套机制，不能互相替代
"eslint.validate": ["javascript", {"language": "vue", "autoFix": true}] —— 必须显式声明 vue 语言支持并开启 autoFix，否则 ESLint 根本不处理 .vue 文件中的 JS 部分
额外注意："[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"} 这行容易被误加——它会让 Prettier 直接格式化整个 .vue 文件（包括 template），但 Prettier 默认不支持 Vue template，除非你装了 @prettier/plugin-vue 并在 .prettierrc 里启用它

Vue 2 和 Vue 3 的 Prettier 插件支持差异

Vue 2 项目中，@prettier/plugin-vue 对 <template></template> 的支持有限，尤其是 v-for、v-if 嵌套结构容易崩；Vue 3 因为编译器升级，插件支持更稳。

Vue 2 推荐方案：继续用 Vetur 做 template 格式化（配置 "vetur.format.defaultFormatter.html": "prettier"），但需安装 prettier + prettier-plugin-vue 并确保版本兼容（如 prettier@2.8.8 + prettier-plugin-vue@2.4.0）
Vue 3 必须启用：
```
"prettier": {
  "plugins": ["@prettier/plugin-vue"]
}
```
并在 .prettierrc 中添加 "vueIndentScriptAndStyle": true 等 Vue 专属选项
检查是否生效：打开一个 .vue 文件，在 VSCode 右下角点击格式化器名称，确认显示的是 Prettier 或 Vetur，而不是 None 或 Default Formatter

最常被忽略的一点：VSCode 的 editor.codeActionsOnSave 不会自动格式化 template，也不会修复 style 中的 CSS 问题——它只响应 ESLint 能识别并 fix 的规则。template 和 style 的格式化，本质是另一个独立流程，依赖 Vetur 或 Prettier 插件本身的解析能力，和 ESLint 的 rule list 没有关系。