如何阻止Eslint因单个错误弹出“Compiled with errors”编译错误页面？

方法1：精准调整ESLint规则级别 #

把你不想触发编译阻断的规则，从error级别改成warn级别。比如你提到的未使用变量问题，对应的规则是no-unused-vars，直接在你的.eslint.js的rules节点里添加或修改这条规则：

module.exports = {
    // ... 保留原有配置
    rules: {
        // ... 保留你已有的规则
        'no-unused-vars': 'warn', // 将未使用变量设为警告，不会阻断编译
        // 其他你想降级的规则都可以按这个格式修改
    },
};

修改后，ESLint只会在控制台输出警告信息，不会弹出编译错误页面，但你依然能清楚看到代码里的问题。

方法2：通过环境变量全局禁用ESLint错误阻断 #

直接在package.json的scripts里修改start命令，添加环境变量ESLINT_NO_DEV_ERRORS=true：

{
  "scripts": {
    "start": "ESLINT_NO_DEV_ERRORS=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  }
}

这个变量会让react-scripts把所有ESLint错误都当成警告处理，彻底避免编译错误页面弹出，同时控制台依然会完整显示所有ESLint问题。

方法3：用CRACO做更灵活的自定义配置（适合复杂场景） #

如果你不想eject项目，又需要更多自定义空间，可以用@craco/craco：

1. 先安装依赖：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js，添加ESLint相关配置：

module.exports = {
  eslint: {
    enable: true,
    configure: {
      // 在这里可以针对性修改ESLint规则级别
      rules: {
        'no-unused-vars': 'warn',
      },
    },
    // 或者直接设置让ESLint只发警告不抛错误
    pluginOptions: {
      eslint: {
        emitWarning: true,
        emitError: false,
      },
    },
  },
};

3. 最后修改package.json的scripts，替换成craco命令：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

按需选择即可：方法1适合精准控制特定规则，方法2适合快速全局生效，方法3适合需要更多自定义的场景。

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