create-react-app杀端口重启后ESLint不生效如何配置解决

这个问题的核心原因是CRA内置的ESLintWebpackPlugin默认开启了构建缓存，通过kill-port之类的命令强制杀进程时，缓存的状态标记没有被正常重置，下次启动会直接读取异常缓存跳过ESLint检测，只有检测到package.json等核心配置文件变更时，才会自动清空缓存重新执行检测。

以下几个方案都可以实现每次启动自动执行ESLint检测，不需要手动改配置触发：

方案1：零配置改启动脚本（推荐，无侵入） #

不需要eject也不需要改webpack配置，只需要通过环境变量关闭ESLint缓存即可：

• 先安装跨平台环境变量工具，适配Windows/macOS/Linux系统：

  npm i cross-env -D
  

• 打开package.json，把原来的start脚本替换为：

  "scripts": {
    "start": "cross-env ESLINT_CACHE=false DISABLE_ESLINT_PLUGIN=false react-scripts start"
  }
  

  改完之后不管是正常重启还是杀端口强制重启，都会跳过ESLint缓存读取，每次启动全量执行规则检测。

方案2：已自定义webpack配置的项目直接改插件参数 #

如果项目用了craco或者react-app-rewired覆盖CRA默认webpack配置，可以直接修改ESLint插件的配置项，从根源关闭缓存：

// craco.config.js 配置示例
module.exports = {
  webpack: {
    configure: (config) => {
      // 找到内置的ESLint插件实例
      const eslintPlugin = config.plugins.find(
        item => item.constructor.name === 'ESLintWebpackPlugin'
      )
      if (eslintPlugin) {
        // 关闭缓存，每次编译全量检测
        eslintPlugin.options.cache = false
        // 确保检测到error时正常阻断编译
        eslintPlugin.options.failOnError = true
      }
      return config
    }
  }
}

方案3：临时快速修复（不想改项目配置时用） #

如果只是临时遇到这个问题不想改配置，不需要改package.json内容，杀完端口之后先执行下面的命令清空CRA构建缓存，再启动服务即可正常触发ESLint检测：

# mac/Linux
rm -rf node_modules/.cache
# Windows
rd /s /q node_modules\.cache

验证配置是否生效的方法：随便在业务组件里写一个未被调用的变量，比如const demo = 1，启动后如果终端输出no-unused-vars的报错，就说明ESLint检测已经正常加载。

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