react-hooks/exhaustive-deps 未在 VS 代码中显示答案

【问题标题】：react-hooks/exhaustive-deps not showing in VS codereact-hooks/exhaustive-deps 未在 VS 代码中显示
【发布时间】：2022-10-20 19:52:30
【问题描述】：

我有一个 .eslintrc 文件，其中包含以下规则：

"rules": {
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error",
    "no-console": "warn"
},

我已经安装了：eslint-plugin-prettier、eslint-config-prettier 和 eslint-plugin-react-hooks

我在 vscode 的 settings.json 中启用了"eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ],

但是当我删除 useEffect 中所需的依赖项时，它并没有显示我希望它会出现的错误

我还需要做什么？

【问题讨论】：

标签： reactjs react-hooks eslint

【解决方案1】：

在.eslintrc 中，除了添加rules，还必须在plugins 列表中添加react-hooks

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error"
  }
}

【讨论】：

对不起，我应该添加这个。我已经有了这个。我需要使用 CRA/react 脚本版本 4+ 吗？
@RedBaron 根据CRA doc，据说此功能适用于 react-scripts@0.2.0 及更高版本.您是否尝试在终端中手动运行eslint 命令来检查是否有预期的错误？
react-scripts 3.x.x 和 4.x.x 之间有明显的变化。当我安装 3 并重新启动 ESLint 服务器时，它消失了。当我安装并重新启动时，它就在那里

【解决方案2】：

仅当我将 react-scripts 更新为 4.x.x 时，这对我有用

执行此操作后，它还有助于在 VScode 中重新启动 ESLint 服务器

hgb123 如果您还没有这样做，答案也很有用

【讨论】：

【解决方案3】：

我使用 react 18.2.0、react-scripts 5.0.1 和 react-app-rewired 2.2.1。您必须在.eslintrc 中添加一些代码。

{
  "plugins": [
    // ...
    "react-hooks" // for activate eslint checking react hooks
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error"
  }
}

【讨论】：