在 VSCode 中配置 Prettier 实现 Vue 代码保存自动格式化，需要安装 Prettier 扩展并将其设为默认格式化程序，同时启用“保存时格式化”选项。此方案适用于 Vue 2 和 Vue 3 项目，但需注意 Vue 3 推荐配合 Volar 扩展使用，避免格式化程序冲突。

快速处理思路

如果不方便逐步操作，可直接在 VSCode 设置中搜索以下配置项进行修改，或直接在 settings.json 中粘贴配置。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

上述配置强制所有文件及 Vue 特定文件使用 Prettier 扩展进行格式化，并在保存时触发。

为什么会这样

VSCode 本身不内置代码格式化逻辑，而是依赖扩展提供的格式化程序。当多个扩展（如 Volar 和 Prettier）都支持 Vue 文件时，VSCode 需要明确指定优先使用哪一个。未配置默认格式化程序时，保存动作可能不会触发任何格式化，或者触发了非预期的格式化程序。

分步处理

按以下顺序操作，确保扩展冲突最小化且配置生效。

步骤 1：安装必要扩展
在 VSCode 扩展商店搜索并安装 Prettier - Code formatter（ID: esbenp.prettier-vscode）。如果是 Vue 3 项目，建议安装 Vue - Official（原名 Volar，ID: Vue.volar）；如果是 Vue 2 项目，通常使用 Veturin。

步骤 2：配置默认格式化程序
打开 VSCode 设置（Ctrl + ,），搜索 Default Formatter。在设置项中选择 Prettier - Code formatter。或者打开 settings.json 文件，添加以下配置：

"editor.defaultFormatter": "esbenp.prettier-vscode"

步骤 3：启用保存格式化
在设置中搜索 Format On Save，勾选 Editor: Format On Save。对应 JSON 配置为：

"editor.formatOnSave": true

步骤 4：处理 Vue 特定冲突
如果使用 Volar，它内置了格式化功能。为确保 Prettier 生效，建议在 settings.json 中显式指定 Vue 语言模式的格式化程序：

"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

部分情况下需要禁用 Volar 的内置格式化，添加配置："vue.format.enable": false。

怎么验证是否生效

打开一个现有的 .vue 文件，故意打乱某一行代码的缩进或将单引号改为双引号（取决于 Prettier 配置）。按下 Ctrl + S 保存文件。如果代码立即恢复为配置的格式风格，说明配置生效。若未变化，查看 VSCode 底部状态栏是否有格式化错误提示，或检查开发者工具控制台（Help -> Toggle Developer Tools）是否有扩展报错。

常见坑

1. 扩展冲突： 同时启用 Volar 和 Veturin 可能导致格式化行为不确定，建议根据 Vue 版本只启用其中一个。
2. ESLint 冲突： 如果项目同时使用 ESLint，Prettier 的规则可能与 ESLint 冲突。建议安装 eslint-config-prettier 关闭 ESLint 中与 Prettier 重复的规则。
3. 项目级配置缺失： 如果项目根目录没有 .prettierrc 文件，Prettier 会使用默认规则，可能与团队规范不一致。建议提交统一的配置文件到版本控制。

常见问题

保存后没有自动格式化怎么办？

检查 editor.formatOnSave 是否为 true，并确认当前文件语言模式被识别为 Vue。有时需要重启 VSCode 使扩展配置生效。

Vue 3 项目应该用 Volar 还是 Veturin？

Vue 3 项目官方推荐使用 Volar（现名 Vue - Official），Veturin 主要维护 Vue 2 支持。配合 Prettier 时，需确保默认格式化程序指向 Prettier 扩展。

如何确认 Prettier 使用了项目内的配置？

在终端运行 npx prettier `--check` . 可以检查文件是否符合配置。VSCode 扩展会自动读取项目根目录的 .prettierrc 文件，无需额外设置路径。

参考来源

• Visual Studio Marketplace - Prettier - Code formatter: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Vue.js Official Docs - Tooling: https://vuejs.org/guide/scaling-up/tooling.html
• Prettier Official Docs - Configuration: https://prettier.io/docs/en/configuration.html