如何在全局范圍內禁用 react-hooks/exhaustive-deps eslint 警告？

Question

我知道我可以禁用該文件或禁用該行，但我現在想在全局范圍內執行此操作，因此每次我想將useEffect用作componentDidMount()時都不必寫入。

我試過了：

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "off"/0, // tried each
    "react-hooks/exhaustive-deps": "off"/0 // tried each
  },
  "overrides": [
        {
            "files": ["**/*.js"],
            "rules": {
                "react-hooks/rules-of-hooks": "off"/0, // tried each
                "react-hooks/exhaustive-deps": "off"/0 // tried each
            }
        }
    ]   
}

Answer 1

我使用 useEffect 作為componentDidMount()遇到了同樣的“問題”。 您可以忽略該警告在項目的根目錄中添加文件 .eslintrc.json

里面是這樣的（這對我有用）：

{
"overrides": [
    {
        "files": ["**/*.js"],
        "rules": {
            "react-hooks/exhaustive-deps": "off"
        }
    }
]
}

Answer 2

我們一直在尋找一種在整個項目中禁用此規則的方法，因為嘗試修復它的人們不斷引入無限循環錯誤，這些錯誤通常善於隱藏，直到出現正確的變量組合。

該規則基本上做出了一個激進的假設，即傳遞給 useEffect() 的函數根本沒有設計或思想。 如果有一個 if/else 塊從另一個計算一個依賴項，如果它不存在，正確處理它的工作，盲目地將兩個變量添加到依賴項數組很可能會觸發無限循環。

我們總是可以告訴每個人在整個項目中添加 eslint-ignore 行，但這是我們無法關閉的唯一規則。 （這個特定的項目在 package.json 中有 ESLint 配置，因為它使用了 react-scripts，我們試圖通過將其設置為“off”在“規則”塊中將其關閉。我不知道它是否也是.eslintrc 文件的問題。）

Answer 3

如果 useEffect 在 jsx 文件中，則必須使用文件擴展名 jsx，因此覆蓋將變為如下

{
"overrides": [
    {
        "files": ["**/*.jsx"],
        "rules": {
            "react-hooks/exhaustive-deps": "off"
        }
    }
]
}