构建React应用时开发与生产环境ESLint校验结果不一致问题咨询

输出差异属于正常情况 #

这个差异是create-react-app（CRA）自带的react-scripts构建逻辑和手动调用的ESLint的配置、执行逻辑不一致导致的，核心原因有3个：

• 执行的ESLint配置不统一：你项目同时存在两份ESLint配置入口，分别是根目录的.eslintrc.json，以及package.json中eslintConfig字段指定的react-app内置规则。手动执行npm run lint时直接调用本地安装的ESLint，优先读取.eslintrc.json的配置；而执行npm run build时，react-scripts默认会优先使用package.json中声明的内置react-app规则，不会完全沿用自定义的lint规则。
• 执行逻辑不同：你在lint脚本中加了--fix参数，执行时会自动修复所有可自动修复的lint问题，跑完之后剩余的报错数量本来就会比未执行修复的build阶段更少。
• CRA构建默认限制lint输出：react-scripts在生产构建阶段默认只会报会阻断编译的严重lint错误，不会输出全量的lint警告/错误，和手动执行lint的全量输出逻辑天然存在区别。

统一两端输出的解决方法 #

按照以下步骤调整即可让两端的lint输出完全一致：

1. 删除package.json中的eslintConfig字段，避免两份配置冲突，CRA默认会自动读取根目录的.eslintrc.json配置。
2. 修改package.json的build脚本，开启CRA的自定义ESLint配置扩展参数：

"build": "cross-env EXTEND_ESLINT=true react-scripts build"

开启EXTEND_ESLINT=true后，react-scripts构建阶段会完全沿用项目本地的ESLint配置，不再使用内置的默认规则。
3. 如果需要验证全量未修复的lint报错，可以临时执行不带--fix的lint命令：
npx eslint . --ext .ts --ext .tsx
输出的结果就会和开启扩展后的build阶段输出对齐。

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