VSCode自动格式化代码设置_Vue插件配置详解-VSCode-PHP中文网

vue 2 项目必须使用 vetur 插件，volar 仅适用于 vue 3；两者不可共存，需根据 package.json 中 vue 版本严格选择，并在 settings.json 中正确配置语言专属格式化器、formatonsave 及 vetur.format.defaultformatter。

vscode自动格式化代码设置_vue插件配置详解

Vue 2 项目必须用 Vetur，别装错插件

Vue 2 和 Vue 3 的格式化支持完全不兼容。装错插件会导致 formatOnSave 失效、<style></style> 块不缩进、<script></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> 或 <script lang="ts"></script> 不生效）

注意："editor.formatOnSave" 写在顶层只控制是否启用保存时格式化，不指定语言；而语言块里的同名配置才真正决定该语言是否响应保存动作。

vue-component-analyzer

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

下载

Vetur 下 CSS/SCSS 格式化要单独配 defaultFormatter

Vetur 默认用内置规则格式化 <style></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></style> 块

最隐蔽的问题是：项目里同时启用了 ESLint 的 autoFixOnSave 和 Prettier 的 formatOnSave，两者争抢同一段代码，结果互相覆盖。此时应禁用 ESLint 的自动修复，只让它报错，让 Prettier 负责格式化。