我刚刚创建了一个新模板create-react-app with 反应v17包括在内，并且我像以前一样安装了 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 错误，但不会导致应用程序崩溃。谁能指出我搞砸的地方吗？
当我使用创建应用程序时，我遇到了完全相同的错误create-react-app and 设置 eslint对于应用程序。
eslint 错误出现在browser而不是在console.
有一次，我调试了所有依赖项。看来react-scripts给我造成了 lint 错误。
最新版本的react-scripts:"4.0.0"可能有一些重大更改，可能导致 eslint 在浏览器中抛出错误。
此问题已在react-scipts:"4.0.3"但是，项目中存在的 eslint 错误是默认情况下不转换为警告。你必须创建一个.env 文件其中应该包含一个ESLINT_NO_DEV_ERRORS=true旗帜。由于此标志，您将收到eslint 错误作为警告 and 不是开发中的错误.
This 生产过程中忽略标志当它们运行任何 git hooks 时，这又会导致错误当你试图提交代码与其中存在 eslint 错误.
活跃问题：https://github.com/facebook/create-react-app/issues/9887 https://github.com/facebook/create-react-app/issues/9887
在react-scripts:4.0.2 发布之前解决此问题：
Install 补丁包 and 安装后-安装后作为开发依赖。
Go to node_modules/react-scripts/config/webpack.config.js and make the following changes
完成编辑后，运行纱线补丁包反应脚本。这将创建一个补丁文件夹，与依赖补丁 in it.
现在，正如我们不想每次都这样做安装依赖项时。我们准备去添加另一个脚本到我们的 package.json 文件。
"postinstall":"patch-package".
上面这个脚本每次都会运行当我们安装依赖项时。请记住，您还必须推送包文件夹到你的仓库。如果您需要更改，也可以在部署应用程序时进行。
感谢 @fernandaad 提供此解决方法。
不得不降级到react-scripts:3.4.4版本，因为目前没有可用的解决方法。现在，错误是在控制台而不是浏览器中抛出的。