Vue项目VSCode格式化需ESLint、Prettier、Vetur（或@prettier/plugin-vue）协同：ESLint校验修复JS逻辑，Prettier统一代码风格，Vetur/插件处理template/style格式；eslint--fix对template无效因ESLint不解析HTML；须用eslint-config-prettier禁用冲突规则，并配置codeActionsOnSave触发修复。
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> 里的 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 配置成双引号。结果就是保存时反复“修复→破坏→再修复”。
- 关键动作：必须用
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 是最终执行开关，配错一个就失效。重点看三个字段是否同时生效：
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
-
"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> 的支持有限，尤其是 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 没有关系。
