VSCode 如何配置 Prettier 优先于 ESLint 格式化？

最稳妥的方案是让 Prettier 独占格式化权限，ESLint 只负责代码质量检查，通过配置 eslint-config-prettier 屏蔽冲突规则，并在 VSCode 设置中指定默认格式化工具为 Prettier 插件。

先说结论：两者分工明确才能避免保存时代码反复跳动，格式化交给 Prettier，逻辑检查交给 ESLint。

适合：前端项目需要统一代码风格且避免保存时代码反复跳动的场景。
先准备：安装 VSCode 官方扩展及项目本地依赖包，确保版本兼容。
验收：保存文件后观察状态栏显示 Prettier，且 ESLint 不再报格式类错误。

命令速用版

在项目根目录终端执行以下命令，安装核心依赖包。注意需本地安装而非全局安装，以确保团队环境一致。

npm install `--save-dev` eslint prettier eslint-config-prettier eslint-plugin-prettier

为什么会这样

ESLint 和 Prettier 的定位不同：ESLint 是“代码医生”，负责检查逻辑错误和潜在问题；Prettier 是“代码打印机”，负责强制统一代码风格。如果两者同时开启格式化功能，会在引号、分号、缩进等规则上产生冲突。例如 ESLint 要求单引号，Prettier 也要求单引号，但解析逻辑细微差别可能导致保存时无限重写。因此必须关闭 ESLint 的格式类规则，将所有风格决定权交给 Prettier。

分步处理

1. 安装 VSCode 扩展

在扩展市场搜索并安装以下官方扩展，注意作者信息以避免安装山寨插件：

ESLint：作者 Dirk Baeumer (Microsoft)
Prettier - Code formatter：作者 Esben Petersen

2. 配置 ESLint 禁用格式规则

在项目根目录的.eslintrc.js或.eslintrc.cjs文件中，确保extends数组末尾包含prettier或使用plugin:prettier/recommended。这将自动关闭与 Prettier 冲突的 ESLint 规则。

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  rules: {
    'prettier/prettier': 'error'
  }
};

3. 配置 VSCode 编辑器行为

在项目根目录创建.vscode/settings.json，明确指定默认格式化程序为 Prettier，并禁用 ESLint 的自动格式化功能，防止两者争抢。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.enable": true,
  "eslint.format.enable": false
}

4. 定义 Prettier 风格偏好

创建.prettierrc文件，写入具体的格式配置，如分号、引号风格等。所有风格相关决定以此文件为准。

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

怎么验证是否生效

1. 检查状态栏

打开一个 JavaScript 或 TypeScript 文件，查看 VSCode 右下角状态栏。应显示Prettier字样，而不是ESLint或None。

2. 保存测试

故意写一段格式错误的代码（如缺少分号或缩进混乱），保存文件。代码应自动修正格式，且“问题”面板中不应出现关于引号或分号的 ESLint 报错。

3. 逻辑检查验证

写一段逻辑错误代码（如未使用的变量），保存后 ESLint 应正常报红警告，证明 ESLint 仍在工作，只是不再干预格式。

常见坑

1. 全局安装无效

VSCode 默认优先使用项目内的二进制文件。全局安装 eslint 或 prettier 无意义，必须确保项目本地依赖已安装。

2. 配置文件语法错误

如果.prettierrc或.eslintrc存在语法错误（如多余的逗号），VSCode 可能静默失效，导致保存无反应。需检查配置文件合法性。

3. 语言特定配置缺失

editor.formatOnSave有时需针对特定语言开启。若全局开启无效，尝试在 settings.json 中针对[javascript]或[typescript]单独配置。

4. Vue/TS 特殊支持

使用 TypeScript 或 Vue 单文件组件时，需确保 Prettier 版本支持相应解析器。旧版本可能跳过<script setup>区域，看起来像未格式化。

参考来源

vscode 格式化规则_使用 Prettier/ESLint 配置统一代码风格
VSCode 代码格式化指南:Prettier 与 ESLint 的完美结合
VSCode 中如何配置 ESLint 和 Prettier 以统一代码风格【教程】
VSCode 怎样配置 Prettier 进行代码自动格式化【教程】
如何为 VSCode 配置 ESLint 和 Prettier 以实现代码自动规范【教程】