Vue 2 项目必须使用 Vetur 插件，Volar 仅适用于 Vue 3；两者不可共存，需根据 package.json 中 vue 版本严格选择，并在 settings.json 中正确配置语言专属格式化器、formatOnSave 及 vetur.format.defaultFormatter。
Vue 2 项目必须用 Vetur，别装错插件
Vue 2 和 Vue 3 的格式化支持完全不兼容。装错插件会导致 formatOnSave 失效、<style> 块不缩进、<script> 里分号被强行加上等现象。Volar 是 Vue 3 专用，Vetur 是 Vue 2 专用——没有“通用”插件。
确认项目版本最直接的方式是看 package.json 中的 vue 依赖：若为 "vue": "^2.7.16" 类似版本，就只能用 Vetur；若为 "vue": "^3.4.0" 或更高，则必须用 Volar。
- Vetur 插件 ID 是
octref.vetur，安装后需重启 VSCode - Volar 插件 ID 是
vue.volar，安装后还需启用TypeScript-Vue Plugin（在插件设置里勾选） - 两者不能共存：同时启用会触发格式化冲突，VSCode 右下角语言模式可能反复切换或显示 “None”
settings.json 里必须写对这三处语言绑定
只写 "editor.formatOnSave": true 没用——它只是开关，真正起作用的是语言专属配置。VSCode 格式化逻辑按“语言 → 默认格式化器 → 触发时机”三级匹配，缺一不可。
以下配置必须同时存在，且顺序无关，但缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
"[vue]": { "editor.defaultFormatter": "octref.vetur" }（Vue 2）或"[vue]": { "editor.defaultFormatter": "vue.volar" }（Vue 3） -
"editor.formatOnSave": true（全局开关） -
"[javascript]": { "editor.formatOnSave": true }和"[typescript]": { "editor.formatOnSave": true }（否则<script setup>或<script lang="ts">不生效）
注意："editor.formatOnSave" 写在顶层只控制是否启用保存时格式化，不指定语言；而语言块里的同名配置才真正决定该语言是否响应保存动作。
Vetur 下 CSS/SCSS 格式化要单独配 defaultFormatter
Vetur 默认用内置规则格式化 <style>，结果常是属性挤在一行、大括号不换行、无缩进。这不是 bug，是默认行为。必须显式告诉它用 Prettier 来接管。
在 settings.json 中添加：
"vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.postcss": "prettier"
前提是已安装 Prettier - Code formatter 插件（ID：esbenp.prettier-vscode），且项目根目录有合法的 .prettierrc 或 prettier.config.js。常见失效原因是：.prettierrc 里写了 module.exports = {...}，但项目是 ESM 模式，应改用 export default {...}。
保存后没反应？先看右下角状态栏显示什么
VSCode 状态栏左下角的语言模式（如 “Vue”、“JavaScript React”）和右下角的格式化器标识（如 “Prettier”、“Vetur”、“None”）是第一排查线索。如果显示 “None”，说明当前文件没绑定任何格式化器。
- 点击右下角格式化器名称 → 选 “Configure Default Formatter for ‘Vue’” → 手动选 Vetur 或 Volar
- 若点击后弹出空列表，说明插件未正确激活：检查插件是否启用、VSCode 是否重启、工作区是否被禁用了插件（查看
.vscode/extensions.json） - 若显示 “Prettier” 但 CSS 不格式化，说明 Vetur 的
defaultFormatter.css配置未生效，或 Prettier 插件本身未识别到.vue文件中的<style>块
最隐蔽的问题是：项目里同时启用了 ESLint 的 autoFixOnSave 和 Prettier 的 formatOnSave，两者争抢同一段代码，结果互相覆盖。此时应禁用 ESLint 的自动修复，只让它报错，让 Prettier 负责格式化。
