Prettier与ESLint集成配置指南

在Visual Studio Code中配置代码自动格式化时，你是否遇到过这样的困扰：Prettier和ESLint似乎总在“打架”？保存文件后，格式纹丝不动，或者代码风格检查与质量检查的规则互相覆盖，导致编辑器里一片红波浪线。这通常不是工具本身的问题，而是插件优先级、配置文件或协同机制没有正确设置导致的。

别担心，下面这套组合拳，能帮你理顺二者的关系，让它们从“互相拆台”变成“默契搭档”。

一、安装核心插件并清理干扰源

第一步，是确保VSCode的格式化“指挥权”清晰明确。如果同时存在多个格式化工具，保存时它们可能会互相冲突，导致谁都不生效。

首先，打开VSCode的扩展面板（快捷键 Ctrl+Shift+X 或 Cmd+Shift+X），搜索并安装这两个核心插件：Prettier - Code formatter（作者：esbenp） 和 ESLint（作者：dbaeumer）。

接着，在已启用的扩展列表里检查一下，看看有没有其他名称里带“Beautify”、“Format”、“Style”字样的插件。如果有，建议右键点击，选择禁用（Disable），避免它们干扰保存事件。

最后，进入VSCode设置（快捷键 Ctrl+, 或 Cmd+,），搜索“Format On Save”并确保它被勾选；同时，搜索“Default Formatter”，将其设置为 esbenp.prettier-vscode。这相当于告诉编辑器：“保存时自动格式化，并且默认请Prettier来干这个活。”

二、项目级依赖安装与规则解耦

光在编辑器里设置还不够，项目本身也需要安装对应的npm包，并让ESLint知道Prettier的存在，从而关闭那些与代码风格（如缩进、分号、引号）相关的重复规则。

在你的项目根目录下打开终端，执行安装命令。如果你用的是pnpm：

pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-prettier

如果用的是npm，则将命令替换为：npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier。

然后，打开（或新建）项目根目录下的 .eslintrc.js 配置文件。找到 extends 这个数组字段，确保在它的最后一项添加 'prettier'。例如：

['eslint:recommended', 'plugin:react/recommended', 'prettier']

这个顺序很重要，它让 eslint-config-prettier 能够覆盖掉前面所有可能与Prettier冲突的样式规则。

接下来，在同一个目录下创建一个 .prettierrc 文件，里面用JSON格式写上你想要的代码风格，比如：

{"semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 100}

这样，Prettier就有了自己的“行为准则”。

三、VSCode工作区精准控制（settings.json方式）

为了避免不同项目或全局设置带来的干扰，更推荐在项目内部进行精准控制。这需要创建一个工作区级别的配置文件。

在项目根目录下，新建一个 .vscode 文件夹，然后在里面创建一个 settings.json 文件。

在这个文件里，你可以为不同类型的文件分别指定使用Prettier作为格式化器：

{ "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }

同时，为了在保存时不仅能格式化代码，还能自动修复ESLint能识别的逻辑问题（比如未使用的变量），可以追加一条设置：

{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }

这样一来，每次保存文件，都会先由Prettier整理格式，再由ESLint尝试修复代码质量问题，一气呵成。

四、ESLint驱动式格式化（推荐高一致性场景）

如果你希望团队的代码检查流程更加统一，甚至想在CI/CD流水线里只靠ESLint就能同时检查代码质量和格式，那么可以采用这种“ESLint驱动”的模式。简单说，就是让Prettier的规则以ESLint插件的形式运行，所有格式问题都表现为ESLint错误。

首先，修改你的 .eslintrc.js 文件。将 extends 数组末尾的 'prettier' 替换为 'plugin:prettier/recommended'。这个预设会帮你自动完成插件引入和规则设置。

如果需要更手动地控制，也可以在 plugins 字段里添加 'prettier'，并在 rules 里明确添加一条：'prettier/prettier': 'error'。

然后，调整一下 .vscode/settings.json 的配置。可以注释掉或移除之前为各种语言单独设置的 editor.defaultFormatter，转而启用ESLint的格式化能力：

{ "eslint.format.enable": true, "editor.formatOnSave": true }

这样，保存时的格式化工作就交由ESLint来统筹了。

五、EditorConfig统一基础编辑行为

最后，还有一个容易被忽略但很有用的补充：EditorConfig。它用来定义一些最基础的编辑器行为，比如用空格还是制表符（Tab）缩进、缩进几个字符、文件末尾是否保留空行等。这能保证即使用不同的编辑器或操作系统打开项目，这些底层行为也是一致的。

在项目根目录下创建一个 .editorconfig 文件，写入类似下面的配置：

root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true

别忘了，在VSCode里安装 EditorConfig for VS Code 这个插件，它会让编辑器识别并应用这个文件的配置。

至此，从编辑器插件、项目依赖、格式化规则到基础编辑行为，一套完整的协同配置就完成了。这套组合拳打下来，应该能解决绝大多数Prettier与ESLint的冲突问题，让你的代码在保存时自动变得既整洁又规范。