ESLint 与 Prettier 应分工协作：ESLint 专注逻辑错误和代码质量，Prettier 专责格式化；冲突源于规则重叠，解法是用 eslint-config-prettier 禁用 ESLint 中所有格式规则，并将 prettier 放在 extends 最后。

ESLint 和 Prettier 不是二选一的关系，而是分工明确：ESLint 检查逻辑错误和代码质量（比如 no-unused-vars、eqe

为什么 ESLint + Prettier 一起用会报红？

常见原因是两者规则重叠且冲突，比如 ESLint 启用了 semi（要求分号），而 Prettier 默认不加分号，保存时 Prettier 格式化完立刻被 ESLint 报错。根本解法不是“调高某条规则优先级”，而是让 ESLint 忽略所有格式类规则，只专注代码质量。

• 安装 eslint-config-prettier：它会禁用 ESLint 中所有与 Prettier 冲突的规则
• 在 ESLint 配置中，把 prettier 放在 extends 数组**最后**（覆盖优先）
• 不要手动启用 prettier/prettier 规则后又去配 semi、quotes 这类格式规则

推荐的最小可行配置组合

以现代前端项目（React + TypeScript）为例，不堆砌插件，只留真正需要的：

• 依赖安装：npm install -D eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser
• ESLint 配置（.eslintrc.cjs）：

  module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: ['react', 'react-hooks', '@typescript-eslint'],
    extends: [
      'eslint:recommended',
      'plugin:react/recommended',
      'plugin:react-hooks/recommended',
      'plugin:@typescript-eslint/recommended',
      'prettier' // 必须放最后
    ],
    rules: {
      'react/react-in-jsx-scope': 'off', // React 17+ 不需要
      '@typescript-eslint/no-explicit-any': 'warn'
    }
  };
  

• Prettier 配置（.prettierrc）保持极简，只覆盖默认行为：

  {
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5"
  }
  

编辑器和提交前怎么确保生效？

光配好文件没用，关键在执行时机和工具链协同：

• VS Code 需装插件 ESLint 和 Prettier，并在设置中指定：

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false // 关闭 Prettier 自动格式化，交给 ESLint 统一处理
  

• 提交前加 lint-staged 防漏：

  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
  

  注意顺序：先 ESLint 修复逻辑/结构问题，再 Prettier 统一格式，避免来回打架
• CI 中跑 eslint . --max-warnings 0，把警告当错误卡住构建，否则配置形同虚设

最容易被忽略的是「Prettier 不该参与 lint 命令」——它没有 lint 功能，只是格式化器。如果在 package.json 的 lint 脚本里混写 prettier --check，就会让团队误以为“格式问题=代码问题”，模糊了质量红线和风格偏好之间的界限。

# react  # javascript  # java  # js  # 前端  # json  # typescript  # npm  # 工具  # ai  # 代码规范  # 堆  # 放在  # 会报  # 的是  # 不需要  # 形同虚设  # 并在  # 这类  # 并将  # 会让  # 为例 

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

相关推荐： 手机软键盘弹出时影响布局的解决方法  JS实现鼠标移上去显示图片或微信二维码  Laravel如何优化应用性能？（缓存和优化命令）  EditPlus 正则表达式 实战(3)  手机网站制作与建设方案,手机网站如何建设？  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  原生JS实现图片轮播切换效果  node.js报错：Cannot find module 'ejs'的解决办法  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  SQL查询语句优化的实用方法总结  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  如何确认建站备案号应放置的具体位置？  利用JavaScript实现拖拽改变元素大小  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  使用spring连接及操作mongodb3.0实例  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  高性价比服务器租赁——企业级配置与24小时运维服务  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  如何在宝塔面板创建新站点？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  MySQL查询结果复制到新表的方法(更新、插入)  如何有效防御Web建站篡改攻击？  Python文件异常处理策略_健壮性说明【指导】  网站建设要注意的标准 促进网站用户好感度！  简单实现jsp分页  如何在阿里云完成域名注册与建站？  Laravel用户密码怎么加密_Laravel Hash门面使用教程  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  如何在浏览器中启用Flash_2025年继续使用Flash Player的方法【过时】  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  Laravel如何使用Service Container和依赖注入？（代码示例）  历史网站制作软件,华为如何找回被删除的网站？  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  Python数据仓库与ETL构建实战_Airflow调度流程详解  Laravel如何处理异常和错误？（Handler示例）  如何在IIS中新建站点并解决端口绑定冲突？  Laravel如何实现事件和监听器？（Event & Listener实战）  油猴 教程,油猴搜脚本为什么会网页无法显示？  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  网站页面设计需要考虑到这些问题  Laravel Session怎么存储_Laravel Session驱动配置详解  Android实现代码画虚线边框背景效果  谷歌浏览器如何更改浏览器主题 Google Chrome主题设置教程  电商网站制作价格怎么算,网上拍卖流程以及规则？