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/

相关推荐
IT_陈寒33 分钟前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu14 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript