如何在全球范围内禁用 react-hooks/exhaustive-deps eslint 警告？答案

【问题标题】：How to disable react-hooks/exhaustive-deps eslint warning globally?如何在全球范围内禁用 react-hooks/exhaustive-deps eslint 警告？
【发布时间】：2021-01-06 12:27:31
【问题描述】：

我知道我可以禁用该文件或禁用该行，但我现在想在全局范围内执行此操作，因此我不必每次将 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
            }
        }
    ]   
}

【问题讨论】：

你想清楚了吗？我也在努力执行规则。我尝试将它直接放在 package.json 和单独的 .eslitrc 文件中。尝试了所有选择，但没有任何运气。 )

标签： reactjs react-hooks eslint

【解决方案1】：

我在使用 useEffect 和 componentDidMount() 时遇到了同样的“问题”。您可以忽略该警告，在项目的根目录中添加文件 .eslintrc.json

里面是这样的（这对我有用）：

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

【讨论】：

对我来说，这也会禁用其他警告

【解决方案2】：

我们一直在寻找一种在整个项目中禁用此规则的方法，因为尝试修复它的人们不断引入无限循环错误，这些错误通常擅长隐藏，直到出现正确的变量组合。

该规则基本上做了一个激进的假设，即根本没有设计或思想进入传递给 useEffect() 的函数。如果有一个 if/else 块在不存在时计算一个依赖项与另一个依赖项，则正确处理其工作，盲目地将两个变量添加到依赖项数组很可能会触发无限循环。

我们总是可以告诉每个人在整个项目中添加 eslint-ignore 行，但这是我们无法关闭的唯一规则。（这个特定项目在 package.json 中有 ESLint 配置，因为它使用 react-scripts，我们试图通过将其设置为“关闭”在“规则”块中将其关闭。我不知道它是否也是.eslintrc 文件有问题。）

【讨论】：

我觉得这个规则很傻很奇怪

【解决方案3】：

如果您的 useEffect 在 jsx 文件中，则必须使用文件扩展名 jsx，这样覆盖将如下所示

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

【讨论】：