如何在全局范围内禁用 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"
        }
    }
]
}