Prettier与ESLint可在VSCode中协同工作，Prettier负责代码格式化，ESLint专注代码质量检查。通过安装eslint-config-prettier和eslint-plugin-prettier避免规则冲突，并在.eslintrc配置中引入plugin:prettier/recommended。同时在VSCode的settings.json中设置Prettier为默认格式化工具，开启保存时自动格式化和ESLint自动修复，实现编辑时实时提示、保存时统一格式，提升开发效率与团队协作一致性。
Prettier 和 ESLint 在 VSCode 中可以很好地协同工作，各自负责不同的职责：Prettier 负责代码格式化，ESLint 负责代码质量和潜在错误的检查。通过合理配置，两者不会冲突，反而能提升开发体验。
1. 明确分工：Prettier 格式化，ESLint 检查逻辑
为了协同工作，首先要让工具各司其职：
Prettier：专注代码样式（如引号、分号、换行、缩进等）ESLint：专注代码质量（如未使用变量、潜在 bug、命名规范等）
避免 ESLint 重复管理格式问题，可通过插件禁用与 Prettier 冲突的规则。
2. 安装必要插件和依赖
在项目中安装以下 npm 包：
npm install –save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
其中：
eslint-config-prettier：关闭所有与 Prettier 冲突的 ESLint 规则eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行，格式错误会显示在 ESLint 提示中
同时确保 VSCode 安装了以下扩展：
ESLint（由 Microsoft 提供）Prettier – Code formatter
3. 配置 ESLint 使用 Prettier
在项目根目录的 .eslintrc.js 或 .eslintrc.json 中添加：
如知AI笔记
如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型
27 查看详情 { “extends”: [ “eslint:recommended”, “plugin:prettier/recommended” ], “rules”: { // 可自定义额外规则 }}
这样会自动启用 prettier/recommended，整合 Prettier 并应用 eslint-config-prettier 来消除冲突。
4. 配置 VSCode 默认格式化工具
在 VSCode 的 settings.json 中设置：
{ “[javascript]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[typescript]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[json]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “editor.formatOnSave”: true, “editor.codeActionsOnSave”: { “source.fixAll.eslint”: true }}
说明：
保存文件时自动用 Prettier 格式化同时触发 ESLint 自动修复可修复的问题（如缺少分号、空格等）
注意：开启 source.fixAll.eslint 后，ESLint 会调用 Prettier（如果已集成），实现统一处理。
基本上就这些。配置完成后，你在编辑代码时既能获得 ESLint 的质量提示，又能享受 Prettier 带来的统一格式，保存即自动整理，团队协作更顺畅。
以上就是Prettier和ESLint在VSCode中如何协同工作？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/442681.html
微信扫一扫 
支付宝扫一扫 
