由于ESLint错误，我的创建-反应-应用程序无法编译

Question

我刚刚创建了一个新的模板与create-react-app与reactv17包括，我安装了eslint依赖，因为我以前，这是我的package.json文件

{
  "name": "gym-nation",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "classnames": "^2.2.6",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-intl": "^5.8.6",
    "react-redux": "^7.2.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.12.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.14.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.9.2",
    "node-sass": "^4.14.1",
    "prettier": "^2.1.2",
    "react-app-rewired": "^2.1.6"
  }
}

这是我的eslintrc.json：（注意我还没有添加所有的规则）

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["react-app", "prettier"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 140,
        "singleQuote": true,
        "editor.formatOnSave": true,
        "arrowParens": "always",
        "jsxSingleQuote": true,
        "tabWidth": 2,
        "trailingComma": "none"
      }
    ],
    "no-unused-vars": "error"
  }
}

当我运行应用程序时，由于以下错误，应用程序将无法编译：

Line 113:13:  'isLoading' is assigned a value but never used  no-unused-vars

我在以前的项目中工作过，代码中显示了eslint错误，但没有导致应用程序崩溃。有人能指出我把事情弄糟的地方吗？

谢谢

Answer 1

我花了几个小时才找到可能的解决办法：

1-变通方法：在package.json文件中添加规则

  "eslintConfig": {
    "extends": ["react-app"],
    "rules": {
      "no-unused-vars": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "max-len": "warn"
        }
      }
    ]
  },

2.eslintrc.js文件，在根文件夹中添加. env文件，内容如下：

DISABLE_ESLINT_PLUGIN=true
ESLINT_NO_DEV_ERRORS=true

>

禁用ESLINT插件-将在开发和生产中禁用ESLINT网页包插件。-这是必须的。

ESLINT_无开发错误-将在开发期间将ESLINT错误转换为警告。因此，ESLint输出将不再出现在错误覆盖中。单凭这一点并不能解决这个问题。

另见这里和这里留档

Answer 2

我能够使用env变量修复它，因为我不使用webpack。

确保您使用的是VSCode扩展，并且安装了eslint作为开发依赖项（以及您可能需要的任何其他插件）。

要使代码在开发中处于lint状态，但不会失败，请将此添加到.env.development:ESLINT\u NO\u DEV\u ERRORS=true

要在生产版本上完全禁用eslint，请将此添加到.env.production:disable\u eslint\u PLUGIN=true

之后，它不应该失败任何构建。我不明白为什么eslint应该失败构建。它帮助我们保持代码质量，但不一定强制执行。

Answer 3

我有完全相同的错误，当我创建应用程序使用create-react-app和设置eslint的应用程序。

eslint错误显示在浏览器中，而不是控制台中。

有一次，我调试了所有依赖项。似乎是react脚本导致了我的lint错误。

react脚本的最新版本：“4.0.0”可能有一些破坏性的更改，这可能会导致eslint在浏览器中抛出错误。

此问题已在react scipts:“4.0.3”中修复，但默认情况下，项目中存在的eslint错误不会转换为警告。您必须创建一个.env文件，该文件应包含ESLINT\u NO\u DEV\u ERRORS=true标志。由于此标志，您将在开发中收到eslint错误作为警告而不是错误。

在生产过程中以及在任何git钩子运行时，都会忽略此标志，这反过来会在您尝试提交包含eslint错误的代码时导致错误。

现行问题：https://html" target="_blank">github.com/facebook/create-react-app/issues/9887

在react scripts:4.0.2发布之前解决此问题的方法：

>

安装修补程序包和postinstall postinstall作为开发人员依赖项。

完成编辑后，运行纱线补丁包react脚本。这将创建一个补丁文件夹，其中包含依赖项补丁。

现在，因为我们不想每次安装依赖项时都这样做。我们将向package.json文件中添加另一个脚本。

“安装后”：“修补程序包”。

每次安装依赖项时，上述脚本都将运行。请记住，您还必须将packages文件夹推送到您的回购协议中。如果您需要更改，也可以在部署应用程序时更改。

感谢@fernandaad提供此解决方案。

不得不降级到react-cript： 3.4.4版本，因为现在没有可用的解决方案。现在，错误被抛到了控制台而不是浏览器中。

1. 删除节点\u模块和package.lock/warn.lock。