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