极客观点
项目管理
HarmonyOS
我刚刚使用 create-react-app 创建了一个新模板，其中包含 react 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 错误，而不会导致应用程序崩溃。谁能指出我搞砸的地方？
原文由 ali hussein 发布，翻译遵循 CC BY-SA 4.0 许可协议
当我使用
create-react-app创建应用程序并为应用程序 设置 eslint 时，我遇到了完全相同的错误。eslint 错误显示在 浏览器 而不是 控制台 中。
有一次，我调试了所有依赖项。似乎
react-scripts导致了我的 lint 错误。最新版本的
react-scripts:"4.0.0"可能有一些重大更改，可能导致 eslint 在浏览器中抛出错误。解决方案：
此问题已在
react-scipts:"4.0.3"中修复，但项目中存在的 eslint 错误 默认不会转换为警告。您必须创建一个 .env 文件，该文件应包含一个ESLINT_NO_DEV_ERRORS=true标志。由于这个标志，您将收到 eslint 错误作为警告 而 不是开发中的错误。这个 标志在生产过程中被忽略，当它们运行任何 git 钩子时，当你尝试提交带有 eslint 错误 的代码 时，这反过来 会导致错误。
更新 2：
活动问题： https ://github.com/facebook/create-react-app/issues/9887
在 react-scripts:4.0.2 发布之前，此问题的解决方法：
安装 patch-package 和 postinstall-postinstall 作为 dev 依赖项。
转到 node_modules/react-scripts/config/webpack.config.js 并进行以下更改
完成编辑后，运行 yarn patch-package react-scripts 。这将创建一个 补丁文件夹，其中包含 依赖补丁。
现在，因为我们 不想在安装依赖项时每次都这样做。我们将在 package.json 文件中 添加另一个脚本。
"postinstall":"patch-package"。感谢 @fernandaad 提供此解决方法。
更新1：
不得不降级到
react-scripts:3.4.4版本，因为目前没有可用的解决方法。现在，错误被抛出在控制台而不是浏览器中。