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 包：

其中：

• eslint-config-prettier：关闭所有与 Prettier 冲突的 ESLint 规则
• eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行，格式错误会显示在 ESLint 提示中

同时确保 VSCode 安装了以下扩展：

• ESLint（由 Microsoft 提供）
• Prettier - Code formatter

3. 配置 ESLint 使用 Prettier

在项目根目录的 .eslintrc.js 或 .eslintrc.json 中添加：

这样会自动启用 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 带来的统一格式，保存即自动整理，团队协作更顺畅。

# javascript  # java  # vscode  # js  # json  # typescript  # 工具  # microsoft 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么导出Excel文件_Laravel Excel插件使用教程  如何在腾讯云服务器快速搭建个人网站？  Android利用动画实现背景逐渐变暗  Mybatis 中的insertOrUpdate操作  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  Laravel如何处理文件下载请求？（Response示例）  如何在腾讯云免费申请建站？  网站优化排名时，需要考虑哪些问题呢？  Python自动化办公教程_ExcelWordPDF批量处理案例  HTML 中动态设置元素 name 属性的正确语法详解  Android滚轮选择时间控件使用详解  如何在IIS管理器中快速创建并配置网站？  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  JavaScript如何实现路由_前端路由原理是什么  如何用好域名打造高点击率的自主建站？  零服务器AI建站解决方案：快速部署与云端平台低成本实践  如何制作一个表白网站视频,关于勇敢表白的小标题？  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  昵图网官网入口 昵图网素材平台官方入口  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  Laravel怎么实现支付功能_Laravel集成支付宝微信支付  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  简历没回改：利用AI润色让你的文字更专业  Laravel如何配置Horizon来管理队列？（安装和使用）  如何用JavaScript实现文本编辑器_光标和选区怎么处理  软银砸40亿美元收购DigitalBridge 强化AI资料中心布局  网站制作企业,网站的banner和导航栏是指什么？  html5的keygen标签为什么废弃_替代方案说明【解答】  如何快速搭建安全的FTP站点？  郑州企业网站制作公司,郑州招聘网站有哪些？  如何用免费手机建站系统零基础打造专业网站？  高防服务器租用首荐平台，企业级优惠套餐快速部署  如何正确选择百度移动适配建站域名？  Laravel如何处理表单验证？（Requests代码示例）  网站建设要注意的标准 促进网站用户好感度！  韩国服务器如何优化跨境访问实现高效连接？  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  微信小程序 HTTPS报错整理常见问题及解决方案  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  Internet Explorer官网直接进入 IE浏览器在线体验版网址  如何用腾讯建站主机快速创建免费网站？  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  制作电商网页,电商供应链怎么做？  简单实现Android验证码  Python数据仓库与ETL构建实战_Airflow调度流程详解  html5audio标签播放结束怎么触发事件_onended回调方法【教程】