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中是如何协同工作的？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/433414.html
微信扫一扫 
支付宝扫一扫 
