react-scripts start报ESLint错误但单独运行eslint无报错原因咨询

• 该现象不属于特殊偶发故障，本质是分支切换后旧依赖残留导致的依赖版本不匹配+两类ESLint校验逻辑差异共同触发的问题，删除node_modules重装后依赖版本完全对齐，报错自然消失。
• react-scripts start运行时内置的ESLint校验，和手动执行yarn eslint触发的校验，在运行逻辑、配置加载规则上存在明确差异。

两类ESLint校验的核心差异 #

• 依赖调用逻辑不同
  手动执行yarn eslint时，直接调用项目根目录node_modules下安装的ESLint可执行文件，完整读取根目录的.eslintrc.js配置，按照配置指定的parser、规则集、tsconfig路径加载所有关联校验插件，包括@typescript-eslint类型校验规则、import路径解析规则。
  react-scripts start内置的ESLint校验是Create React App封装在构建流程里的eslint-webpack-plugin逻辑，优先使用react-scripts自身依赖包内的ESLint版本和配套插件，不会完全复用项目本地安装的ESLint生态依赖。
• 配置加载规则不同
  手动执行ESLint时，会从被校验文件目录向上递归查找所有ESLint配置文件合并生效，能正确加载配置中针对ts/tsx文件指定的@typescript-eslint/parser、关联的tsconfig类型信息：import/extensions、import/no-unresolved规则可正常识别无后缀的ts/tsx导入，@typescript-eslint/no-unsafe-*系列规则能拿到准确的TS类型推导结果，不会触发误报。
  react-scripts内置的ESLint校验自带一套默认基础规则集，在依赖版本不匹配的场景下会出现配置加载失效：报错中的import/extensions、import/no-unresolved问题，是因为内置校验未正确加载ts路径解析配置，无法识别无后缀的ts/tsx导入；@typescript-eslint/no-unsafe-*系列报错，是因为内置校验未正确读取指定的tsconfig.eslint.json文件，拿不到TS类型信息，默认将所有未识别类型的变量判定为any触发误报。
• 缓存逻辑影响不同
  手动执行yarn eslint是全量扫描目标文件，不受构建缓存影响；react-scripts start的ESLint校验会受webpack缓存、node_modules依赖缓存影响。切换分支后如果不清理旧node_modules直接执行yarn install，yarn会优先复用已存在的依赖包，不会完全按照当前分支的lockfile更新所有嵌套依赖，就会出现react-scripts依赖的ESLint插件版本和项目配置要求的版本不兼容的情况，导致配置加载失败触发误报。

问题触发的完整逻辑 #

切换分支后未清理node_modules直接执行yarn install时，部分嵌套依赖没有被更新到master分支lockfile指定的版本，导致react-scripts内置的ESLint插件版本和项目本地ESLint配置不兼容，内置校验加载配置失败触发规则误报；而手动执行yarn eslint直接调用本地安装的ESLint和匹配版本的插件，配置加载正常，因此不会返回报错。删除node_modules重装后，所有依赖版本完全对齐，内置校验的配置加载恢复正常，报错消失。

规避方案 #

• 切换分支时如果两个分支的package.json、yarn.lock存在差异，执行yarn install --force强制更新所有依赖，避免旧依赖残留导致的异常。
• 可以在项目根目录新建.env文件，添加配置DISABLE_ESLINT_PLUGIN=true关闭react-scripts内置的ESLint校验，统一使用手动执行的yarn eslint作为唯一的代码规范校验入口，避免两套校验逻辑不一致的问题。

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