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/

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说6 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python