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

环境

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

.eslintrc.json 配置:

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/

相关推荐
不要进入那温驯的良夜1 分钟前
跨平台UI自动化-Appium
前端
海底火旺2 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
不要进入那温驯的良夜2 分钟前
浏览器技术原理
前端
在泡泡里2 分钟前
前端 mcp 的使用
前端
爱学习的茄子4 分钟前
React Hooks驱动的Todo应用:现代函数式组件开发实践与组件化架构深度解析
前端·react.js·面试
宇宙全栈Link4 分钟前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
南方kenny5 分钟前
从0到1理解JS事件委托:让你的代码性能提升一个level
前端·javascript
西瓜树枝5 分钟前
用 iframe 实现前端批量下载的优雅方案 —— 从原理到实战
前端·javascript
coder_zhx6 分钟前
Vue3自定义编程式弹窗
前端·vue.js
归于尽6 分钟前
原生JS与React的事件差异
前端·javascript·react.js