Vue文件格式化需Vetur/Volar、Prettier与项目配置三层协同：Vetur（Vue2）或Volar（Vue3）负责解析SFC结构并分发区块，Pretterr执行具体语言格式化，.prettierrc等配置统一规则，缺一不可。
Vue文件格式化不是“选一个插件按一下”就能搞定的事——它本质是三类内容（<template>、<script>、<style>）在不同语言规则下协同工作的结果。直接设 editor.defaultFormatter 为 Prettier，会导致 <script> 被格式化，但 <template> 的 HTML 结构可能错乱，<style> 中的 SCSS 可能不生效。
为什么 Prettier 单独处理 .vue 文件会出问题
Prettier 对 Vue 单文件组件的支持是“有限穿透”的：它能识别 <script> 和 <style> 块并调用对应语言处理器，但对 <template> 的 HTML 部分，默认只走基础 HTML 规则，不理解 Vue 指令（如 v-if、@click）、属性顺序、缩进嵌套逻辑。Vetur 或 Volar 才是真正理解 Vue SFC 语义的桥梁。
- Vetur（Vue 2）或 Volar（Vue 3）负责将 .vue 文件拆解为语言区域，并把每个区块转发给对应格式化器
- Prettier 负责实际执行 CSS/SCSS/JS/TS 的样式统一，但它不解析 Vue 特有语法
- ESLint 不参与格式化，只做校验；若你希望保存时自动修复 ESLint 错误（比如引号、分号），需额外配置
editor.codeActionsOnSave
Vue 2 项目必须配 Vetur + Prettier 组合
Vue 2 项目中，Vetur 是目前唯一稳定支持全区块格式化的插件。仅装 Prettier 插件，<template> 格式化大概率失效或结构错位。
- 安装插件：
octref.vetur（Vetur）和esbenp.prettier-vscode（Prettier） - 在
settings.json中明确指定各区块格式化器：{ "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.ts": "prettier" } -
prettyhtml比 Prettier 内置的 HTML 格式化更懂 Vue 模板——它会保留指令换行、对齐v-for和v-if层级、正确缩进嵌套标签 - 不要把
vetur.format.defaultFormatter.js设为vscode-typescript：它不兼容 Vue 的export default选项对象写法，容易删掉空行或破坏属性顺序
Vue 3 项目优先用 Volar + Prettier（别再混用 Vetur）
Volar 是 Vue 3 官方推荐的语言服务，Vetur 在 Vue 3 项目中已逐步弃用。Volar 自带更精准的 SFC 解析能力，且与 TypeScript 深度集成。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 卸载 Vetur，安装
vue.volar和esbenp.prettier-vscode - Volar 默认启用 “Format on Save”，但需确认是否启用
TypeScript-Vue Plugin（在插件设置里勾选） - Volar 不需要像 Vetur 那样手动配置
vetur.format.defaultFormatter.*，它会自动将<script setup>交给 Prettier，<style>交给 Prettier，<template>交给内置的 Vue-aware formatter - 若发现
<template>格式化不理想，可在settings.json中加："volar.format.enable": true, "volar.format.scriptInitialIndent": true, "volar.format.styleInitialIndent": true
多语言混合排版的关键控制点
一个 .vue 文件里同时存在 HTML、JavaScript、CSS、甚至 SCSS/Less，格式化冲突常发生在边界处——比如 <script setup> 里的 defineProps 调用换行，或 <style scoped> 中嵌套选择器的缩进层级。
- 所有格式化行为必须以
editor.formatOnSave为统一入口，禁用editor.formatOnType：否则输入过程中频繁重排会打断思路 - 不要全局设
"editor.defaultFormatter": "esbenp.prettier-vscode"，这会让 .vue 文件绕过 Volar/Vetur 直接交由 Prettier 处理，丢失 Vue 语义 - 务必在项目根目录放
.prettierrc，且至少包含：{ "semi": false, "singleQuote": true, "tabWidth": 2, "bracketSpacing": true, "htmlWhitespaceSensitivity": "ignore" }其中htmlWhitespaceSensitivity必须设为ignore，否则 Prettier 会错误折叠模板中的空白符，导致<span> </span>被压成<span></span> - 如果团队用 ESLint，且希望保存时自动修复风格类错误（非语法错误），要加：
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }但注意：这和格式化是两步操作，ESLint 修复发生在 Prettier 格式化之后，顺序不可逆
真正卡住人的从来不是“能不能格式化”，而是“为什么这个 <template> 块没动”“为什么 SCSS 里的 & 嵌套突然被展开了”——这些都指向同一个事实：Vue 文件格式化不是单工具任务，它是语言服务（Volar/Vetur）+ 格式化器（Prettier）+ 项目配置（.prettierrc/.eslintrc）三层协作的结果。少一层，就可能在某类区块上静默失效。
