VSCode代码美化插件推荐_自动格式化Vue项目代码-VSCode-PHP中文网

prettier 单独无法正确格式化 vue 文件，因其默认只处理部分且不识别和语法；必须配合 volar 插件，由其整体解析 .vue 文件并调用对应语言服务分别格式化各区块。

vscode代码美化插件推荐_自动格式化vue项目代码

Prettier 是 Vue 项目代码自动格式化的事实标准，但单独装它不够——必须配合 Volar 和正确配置，否则 .vue 文件的模板、脚本、样式三部分会格式错乱或完全不生效。

为什么 Prettier 单独不能正确格式化 Vue 文件

Vetur 已被官方弃用，而旧版 Prettier 插件（esbenp.prettier-vscode）默认不识别 .vue 中的 <template></template> 和 <style></style> 块语法。它只处理 <script></script> 部分，且可能把 HTML 模板当成普通字符串胡乱换行。

真正起作用的是 Volar 提供的内置格式化能力，它把 .vue 当作整体解析，并调用对应语言服务（如 TypeScript、CSS、HTML）分别处理各区块。

确保已卸载 vetur（冲突严重，会导致格式化失效或报错 Cannot find module 'vue-language-tools'）
安装 volar（ID：johnsoncodehk.volar），它是 Vue 3 官方推荐的唯一语言支持插件
prettier 仍需保留，用于统一 <script></script> 和 <style></style> 的风格（比如单引号、缩进），但必须交由 Volar 触发，而非直接设为 editor.defaultFormatter

Vue 项目 settings.json 关键配置项

以下配置直接写入工作区（.vscode/settings.json）最稳妥，避免全局设置污染其他项目：

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "[vue]": {
    "editor.defaultFormatter": "johnsoncodehk.volar"
  },
  "[typescript]": {
    "editor.defaultFormatter": "johnsoncodehk.volar"
  },
  "[javascript]": {
    "editor.defaultFormatter": "johnsoncodehk.volar"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "volar.format.enable": true,
  "volar.format.scriptInitialIndent": false,
  "volar.format.styleInitialIndent": false
}

注意点：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

"[vue]" 必须指向 volar，不是 prettier；否则保存时无反应
volar.format.enable 默认为 true，但显式声明可防被 workspace 设置覆盖
scriptInitialIndent 和 styleInitialIndent 设为 false，否则 <script setup></script> 里的代码会被多缩进一层

如何验证格式化是否真在工作

别依赖快捷键 Shift+Alt+F —— 它可能调用错 formatter。用命令面板更可靠：

按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（macOS）
输入 Format Document With... → 回车
选择 Configure Default Formatter... → 点击 vue → 选 Vue - Volar
再试一次 Format Document With...，这次应明确显示 “Volar” 在顶部

如果仍失败，检查右下角状态栏：点击语言模式（如 “Vue”），确认它显示的是 Vue (Volar) 而非 Vue 或 Vue (Vetur)。后者说明插件未正确激活。

常见格式化失败原因与绕过方案

遇到 Failed to format document 或保存后无变化，优先排查：

node_modules 没装全？运行 npm install 或 yarn install 确保 @vue/language-core 存在
项目根目录有 tsconfig.json 或 jsconfig.json 吗？没有的话 Volar 无法推导类型，格式化会退化为纯文本处理
用了 defineProps<...>()</...> 但没配 compilerOptions.isCustomElement？不影响格式化，但可能导致类型提示失效，间接让 Volar 拒绝格式化脚本块
临时救急：右键 → Format Document With → 选 Prettier，仅对 <script></script> 部分生效，但会破坏 <template></template> 结构