Prettier和ESLint在VSCode中是如何协同工作的？

Prettier 和 ESLint 在 VSCode 中协同工作，ESLint 负责代码质量与潜在错误检查，Prettier 专注代码格式统一；通过安装 eslint-config-prettier 禁用 ESLint 的格式规则，避免冲突，并在 VSCode 中设置保存时先由 ESLint 修复问题、再由 Prettier 格式化，可实现“一个管对不对，一个管好不好看”的高效协作。

Prettier 和 ESLint 在 VSCode 中可以协同工作，各自发挥优势，实现代码格式化与代码质量检查的完美配合。简单来说，ESLint 负责发现并修复代码中的潜在问题（比如未使用的变量、错误的逻辑等），而 Prettier 专注统一代码的视觉格式（比如缩进、引号、换行等）。两者分工明确，避免冲突的关键在于合理配置。

功能分工：各司其职

在协同工作中，两者的角色非常清晰：

• ESLint 检查语法错误、代码风格问题和潜在 bug，例如变量未定义、使用了禁用的 API 等
• Prettier 只做一件事：把代码格式化得漂亮一致，比如自动调整括号位置、引号类型、是否加分号等

如果不加协调，它们可能会对同一问题提出不同建议（比如要不要分号），导致互相覆盖或冲突。因此需要让 ESLint 把格式相关的规则交给 Prettier 处理。

消除冲突：使用 eslint-config-prettier

为了让 ESLint 不再干预格式问题，需要安装 eslint-config-prettier 这个插件。它会关闭所有与格式相关的 ESLint 规则，比如：

• quotes（引号）
• semi（分号）
• space-before-blocks（块前空格）

安装后，在 .eslintrc 配置文件中加入 'prettier' 到 extends 数组，确保这些规则被禁用。这样 ESLint 就只关注代码质量和逻辑问题。

VSCode 中的自动格式化设置

在 VSCode 里，要让两者顺畅协作，关键在于编辑器的保存行为配置。推荐设置为：保存时先由 ESLint 修复可修复的问题，再交由 Prettier 格式化代码。

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

27

查看详情

• 确保安装了 Prettier 和 ESLint 两个 VSCode 扩展
• 在 VSCode 设置中启用 "Format On Save"
• 设置 Prettier 为默认格式化工具
• 让 ESLint 扩展的 "Auto Fix on Save" 开启，并排除格式类规则（因为已由 Prettier 处理）

也可以通过配置 editor.defaultFormatter 和 saveParticipate 等设置，精确控制执行顺序。

高级整合：使用 eslint-plugin-prettier

如果你想把 Prettier 的格式检查也纳入 ESLint 流程，可以使用 eslint-plugin-prettier。它会将 Prettier 的格式结果以 ESLint 错误的形式展示，比如格式不对时出现红色波浪线。

这样做的好处是统一报告来源，所有问题都在 ESLint 面板中显示。但注意这不是必须的，很多团队选择让两者独立运行更清晰。

基本上就这些。只要配置得当，Prettier 和 ESLint 在 VSCode 中能无缝合作，一个管“对不对”，一个管“好不好看”，提升编码体验和项目一致性。

以上就是Prettier和ESLint在VSCode中是如何协同工作的？的详细内容，更多请关注php中文网其它相关文章！