Create React App中配置eslintrc后仍无法禁用react/prop-types规则

第一步：排查最常见的配置失误 #

• 确认规则写在正确的配置层级：ESLint所有自定义规则必须放在rules对象内，直接写在配置文件根节点的规则不会被识别。正确的配置格式示例：

{
  "rules": {
    "react/prop-types": "off"
  }
}

• 确认规则取值合法：禁用规则的合法取值为小写"off"或数字0，大小写错误的取值会失效。
• 修改配置后必须重启开发服务：ESLint配置仅在编译服务启动时加载，热更新不会读取新配置，需要终止当前npm start/yarn start进程后重新启动。

第二步：针对Create React App（CRA）项目的特殊处理 #

绝大多数React项目使用CRA搭建，CRA内置的ESLint配置优先级高于外层新建的.eslintrc.json，请优先使用以下方式配置：

方式1：在package.json的eslintConfig字段修改（官方推荐） #

找到package.json中默认的eslintConfig字段，在其内部的rules对象添加禁用规则，示例：

{
  "name": "your-project-name",
  "dependencies": {
    // 原有依赖配置无需修改
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "react/prop-types": "off"
    }
  }
}

该配置是CRA官方支持的自定义规则入口，优先级最高，不会被内置配置覆盖。

方式2：清理冗余ESLint配置文件 #

如果项目根目录同时存在.eslintrc.js、.eslintrc.yaml、无后缀.eslintrc等多份配置文件，ESLint会优先读取排序靠前的配置，导致你修改的.eslintrc.json不生效。你可以删除冗余配置文件，或在优先级更高的配置文件中添加上述禁用规则。

临时兜底方案 #

如果上述操作完成后仍有规则阻断编译，可以将ESLint的报错等级从error降级为warning，这类警告不会中断编译流程。CRA项目可通过@craco/craco或react-app-rewired修改webpack的eslint-webpack-plugin配置，开启emitWarning: true、关闭emitError: true即可。

该方案仅会消除编译中断的问题，ESLint依然会在编辑器中显示规则校验提示。

内容的提问来源于stack exchange，提问作者JimmyTheCode