Prettier与ESLint自动格式化配置：2024年最佳实践与权威指南
在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 Sa ve”并确保其处于启用状态；同时，搜索“Default Formatter”，将其设置为 esbenp.prettier-vscode。这相当于为编辑器指定了默认的格式化执行者。
二、项目级依赖安装与规则解耦
仅配置编辑器是不够的，项目本身也需要安装对应的npm包，并让ESLint识别Prettier，从而关闭那些与代码风格（如缩进、分号、引号）相关的重复规则。
在项目根目录下打开终端，执行安装命令。如果使用pnpm：
pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-prettier
如果使用npm，则执行：npm install --sa ve-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作为格式化工具：
{ "[ja vascript]": { "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.codeActionsOnSa ve": { "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.formatOnSa ve": 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的协同问题，确保你的代码在保存时自动实现格式整洁与规范统一。