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

Question

我知道我可以禁用该文件或禁用该行，但我现在想在全局范围内执行此操作，因此我不必每次想将 auseEffect用作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 as 时遇到了同样的“问题” componentDidMount()。您可以忽略该警告，在项目的根目录中添加文件 .eslintrc.json

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

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

Answer 2

对于我的 CRA ( create-react-app) 应用程序，在项目根目录中创建以下（等效）.eslintrc文件之一对我来说很有效：

.eslintrc.yml：

extends:
  - react-app
rules:
  react-hooks/exhaustive-deps: off

.eslintrc.json：

{
  "extends": [ "react-app" ],
  "rules": {
    "react-hooks/exhaustive-deps": "off"
  }
}

我发现如果我不包含该extends子句，那么我react-hooks/exhaustive-deps成功地禁用了警告，但我也丢失了许多其他警告，这是不可接受的。

该解决方案在CRA 文档中进行了记录（有些笨拙且不完整）。