使用create-react-app时如何在本地机器查看ESlint警告？

此前操作不生效的原因 #

你在.env文件中配置CI=true不生效，是因为.env文件的变量仅在项目代码运行阶段可读取，而create-react-app内置的「警告转错误」逻辑，读取的是执行npm命令时的Shell环境变量，不会加载项目内的.env配置。若你调整ESLint配置后仍未触发报错，通常是对应规则的级别默认设置为warn，而react-scripts默认本地环境不会自动将warn升级为error。

方法1：临时注入CI环境变量运行命令 #

该方式完全对齐CI环境的校验逻辑，无需修改项目配置：

• macOS/Linux环境执行：

  # 构建时触发
  CI=true npm run build
  # 本地启动开发服务时也触发
  CI=true npm start
  

• Windows（cmd环境）执行：

  set CI=true&&npm run build
  

• Windows（PowerShell环境）执行：

  $env:CI = $true; npm run build
  

执行后本地就能输出和CI环境完全一致的ESLint报错。

方法2：修改ESLint配置强制规则报错 #

如果希望日常开发时就能直接暴露问题，无需每次添加环境变量，可以直接把相关规则的级别从warn调整为error：
打开项目根目录的ESLint配置文件（.eslintrc/.eslintrc.js/.eslintrc.json），修改rules字段：

module.exports = {
  // 保留其他现有配置
  rules: {
    "no-unused-vars": "error",
    "react-hooks/exhaustive-deps": "error",
    // 其他需要强制校验的规则都可设置为error
  }
}

配置修改后，本地执行npm start或npm run build时，违反对应规则会直接报错误，不会仅显示警告。

方法3：新增独立ESLint校验命令 #

你也可以在package.json中新增专门的lint命令，主动将所有警告转为错误：

{
  "scripts": {
    // 保留其他现有scripts配置
    "lint": "eslint src --max-warnings=0"
  }
}

执行npm run lint时，只要存在1条ESLint警告就会直接报错退出，逻辑和CI环境完全一致。

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