React hooks帮助我们检查代码规范的插件

1,989 阅读1分钟

使用 ESLint 插件帮助检查 Hooks 的使用

使用 Hooks 的一些特性和要遵循的规则,在应用到日常的开发中,就必须时刻注意不能写错。

包括这么三点:

在 useEffect 的回调函数中使用的变量,都必须在依赖项中声明;

Hooks 不能出现在条件语句或者循环中,也不能出现在 return 之后;

Hooks 只能在函数组件或者自定义 Hooks 中使用。

React 官方为我们提供了一个 ESLint 的插件,专门用来检查 Hooks 是否正确被使用,它就是 eslint-plugin-react-hooks 。通过这个插件,如果发现缺少依赖项定义这样违反规则的情况,就会报一个错误提示(类似于语法错误的提示),方便进行修改,从而避免 Hooks 的错误使用。

使用步骤

  1. 安装这个插件:npm install eslint-plugin-react-hooks --save-dev

  2. 修改:ESLint 配置文件。

    加入两个规则:rules-of-hooks 和 exhaustive-deps。如下:

    {
      "plugins": [
        // ...
        "react-hooks"
      ],
      "rules": {
        // ...
        // 检查 Hooks 的使用规则
        "react-hooks/rules-of-hooks": "error", 
        // 检查依赖项的声明
        "react-hooks/exhaustive-deps": "warn"
      }
    }