react项目因eslint检测未通过而Failed to compile编译失败

环境

• node v16.20.2
• react 18.3.1
• react-scripts 4.0.3

.eslintrc.json 配置：

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "plugins": ["react", "react-hooks", "@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "no-caller": 2,
    "no-undef": 2,
    "no-unused-vars": 2,
    "no-use-before-define": 0,
    "object-curly-spacing": ["error", "always"],
    "strict": 0,
    "semi": 2,
    "no-loop-func": 0,
    "no-multi-spaces": "error",
    "keyword-spacing": [
      "error",
      {
        "before": true,
        "after": true
      }
    ],
    "quotes": [
      "error",
      "single",
      {
        "allowTemplateLiterals": true
      }
    ],
    "indent": [
      "error",
      2,
      {
        "SwitchCase": 1
      }
    ],
    "no-console": ["error"],
    "camelcase": [
      "error",
      {
        "properties": "always",
        "ignoreDestructuring": false
      }
    ],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error"
  },
  "ignorePatterns": ["dist/**/*"],
  "overrides": [
    {
      "files": ["tests/**/*"],
      "env": {
        "jest": true
      }
    }
  ]
}

报错信息

Failed to compile.

src/TreeView.jsx
  Line 181:10:  'test' is assigned a value but never used     no-unused-vars
  Line 181:16:  'setTest' is assigned a value but never used  no-unused-vars

Search for the keywords to learn more about each error.

开发过程中，因为eslint问题，无法很好debug调试程序，影响效率。

解决方式

开发过程仅提示即可，避免eslint造成的编译失败；只需保证build构建环节eslint问题报错即可。

在本地开发环境 .env.development 文件中配置 ESLINT_NO_DEV_ERRORS=true

配置完后，出现的就是 eslint 相关 warnings.

Compiled with warnings.

src/TreeView.jsx
  Line 181:10:  'test' is assigned a value but never used     @typescript-eslint/no-unused-vars
  Line 181:16:  'setTest' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/TreeView.jsx
  Line 181:10:  'test' is assigned a value but never used     no-unused-vars
  Line 181:16:  'setTest' is assigned a value but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

参考：https://create-react-app.dev/docs/advanced-configuration/