React 中的 Eslint 没有纠正错误

Question

我正在开发一个在节点 10 上运行的项目，“react”：“^17.0.1”。 “反应脚本”：“^4.0.1”，

在每个项目开始时都会显示许多警告，例如使用 o ==而不是===等。

这是脚本的一部分，从原始开始，我添加的其他 3 个脚本试图找到解决方案：

"scripts": {
    "start": "env-cmd -f .env.dev --use-shell \"react-scripts start\"",
    "lint": "eslint src --ext .js,.jsx",
    "lint:fix": "npm run lint -- --fix",
    "eslint": "eslint \"src/**/*.{js,jsx}\" --fix"
},

我想运行 eslint 来自动修复警告。 我尝试了以下命令：

eslint "src/**/*.{js,jsx}" --fix
npm run eslint;
npm run lint

无论我运行什么命令，我都会收到这样的错误消息：✖ 312 个问题（3 个错误，309 个警告）

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! company@1.0.0 lint: `eslint src --ext .js,.jsx`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the company@1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/myname/.npm/_logs/2022-04-14T12_48_51_948Z-debug.log

或者：

✖ 312 个问题（3 个错误，309 个警告）

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! company@1.0.0 lint: `eslint src --ext .js,.jsx "--fix"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the company@1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/myname/.npm/_logs/2022-04-14T12_57_18_764Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! company@1.0.0 lint:fix: `npm run lint -- --fix`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the company@1.0.0 lint:fix script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/myname/.npm/_logs/2022-04-14T12_57_18_794Z-debug.log

在 package.json 中有以下信息：

"eslintConfig": {
    "extends": [
        "react-app"
    ]
},

package.json 中没有安装 eslink 包 - 应该使用 react-scripts 嵌入式 eslint。

有人知道如何让 eslint 修复大量没人关心的警告吗？

编辑：也许这个错误出现在警告列表之后，因为中间也有一些错误，例如：

这里文件的路径10:41 错误 React Hook "useState" 在 function "betaBanner" 中被调用，它既不是 React function 组件也不是自定义 React Hook ZC1C424Z5268E683A95D11 React 组件名称必须以大写字母 react-hooks/rules-of-hooks 开头

编辑 2：是的，在我手动更正两个错误后，它现在以黄色✖ 309 problems (0 errors, 309 warnings)写入，最后的错误消失了。

Answer 1

有时重新安装node_modules会为我解决此类问题。

这些是我遵循的步骤：

清理npm缓存： npm cache clean --force

删除node_modules文件夹和package-lock.json文件。

执行新的 package 安装： npm install

启动项目： npm start

对于 VS Code，您可以尝试在 VS Code settings.json中添加这些设置。json

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.fixAll.stylelint": true
},

Answer 2

将此配置添加到 your.eslintrc 配置文件

"react-hooks/exhaustive-deps": [
       "warn",
        {
          "enableDangerousAutofixThisMayCauseInfiniteLoops": true
        }
      ]

在此处阅读有关此问题的更多信息https://github.com/facebook/react/issues/18235#issuecomment-898636301