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的冲突问题，让你的代码在保存时自动变得既整洁又规范。
相关攻略
如何利用AI改写软件高效创作文档：多样化文档类型支持下的最佳实践指南 在当今追求效率的职场环境中，文档创作的速度与质量直接影响个人与团队的核心生产力。面对技术手册、市场分析、产品介绍等多元化的文档需求，传统手动撰写模式常常效率低下、耗时漫长。AI改写软件的出现，彻底改变了这一局面——它已进化为一款能
WPS AI高效办公指南：如何快速制作专业PPT与处理数据 在当今快节奏的工作环境中，高效处理文档、制作专业PPT和进行数据分析，已成为职场人士的核心竞争力。面对海量信息和紧迫的截止日期，你是否也常感到时间紧张、效率低下？本文将深入解析WPS AI这一智能办公工具，分享如何利用它来优化文档工作流程，
如何利用WPS AI提升办公效率，探索智能写作的最佳实践 在追求效率的现代办公环境中，智能写作工具已成为提升生产力的关键。面对文档撰写、格式调整、数据分析等日常任务，如何借助WPS AI实现效率跃升，是每个职场人士都应掌握的技能。本文将深入探讨WPS AI的核心功能与实际应用，为您揭示智能办公的最佳
高效开发Chrome插件需克服官方文档复杂和撰写难题。一份结构清晰的文档能串联manifest、API等模块，化摸索为按图索骥。借助AI工具可快速搭建骨架、优化表达，让开发者聚焦技术细节。完整文档应涵盖项目概述、环境搭建、核心功能、调试测试及界面设计等核心部分。
技能比武活动旨在通过专业切磋提升员工能力与团队凝聚力。活动设置多类项目，提供实质性奖励与荣誉。参与过程本身即是宝贵的学习与成长机会，能有效促进跨部门交流与合作。请各部门按时完成报名，共同迎接这场技艺与智慧的盛会。
热门专题
热门推荐
团队为打造面向年轻群体的智能家居产品，设定了产品打磨、按时交付和预算控制三大目标。通过市场调研、供应链建设及用户测试取得关键进展，并针对沟通、进度与预算挑战，采取了定期同步、任务拆解和开支优化等措施。最终达成目标，积累了项目实战经验，为未来工作提供了参考。
项目X成功交付完整解决方案，攻克技术集成挑战，通过灰度发布控制风险。实现核心功能全覆盖，系统响应时间提升40%，稳定性达99 9%，并沉淀技术文档与流程。经验表明，深入需求沟通与分阶段上线至关重要，未来将持续优化协作与产品价值。
以太坊行情分析工具可提供涨跌预测与风险预警，辅助投资者进行决策。相关软件入口汇集了多种预测功能，旨在帮助用户把握市场动态。需注意投资存在风险，工具仅为参考。
现代职场中，文档处理效率至关重要。传统方式耗时费力，而AI技术能实现一键生成。WPSAI针对文档、PPT和表格提供智能解决方案，帮助用户快速生成初稿，从而聚焦内容深化。其功能便捷且个性化，支持多种文档类型，有效融入工作流程，系统性提升办公效率。
AI智能写作平台正推动内容生产向全链路智能化转型，显著提升效率与互动率。其核心价值覆盖选题、生成、优化、发布及追踪五大环节，通过工具实现各阶段效率飞跃。选型需考量功能完备性、生态整合度与数据安全性，并遵循从体验到迭代的实践路径，以构建高效智能的内容生产体系。