React Hooks 是 React 16.8 版本新增加的特性，可以在不使用类组件的情况下，将状态逻辑的复用封装为独立的函数，使得组件的代码变得更加简洁和易于理解。而 ESLint 是一个常用的 JavaScript 代码检查工具，能够帮助我们规范化代码风格和发现潜在的代码问题。本文将介绍如何使用 ESLint 自定义 React Hooks 校验规则，来确保 Hooks 函数的正确性和健壮性。
安装并配置 ESLint
首先，需要在项目中安装并配置 ESLint。可以使用 npm 或者 yarn 进行安装，然后在项目根目录下，创建一个.eslintrc.js 文件，并添加以下配置：
-- -------------------- ---- -------
-------------- - -
-------- ---------------------- ----------------------------
-------- ----------
------- ---------------
-------------- -
------------ -----
----------- ---------
------------- -
---- -----
--
--
---- -
-------- -----
---- -----
----- -----
--
--------- -
------ -
-------- ---------
--
--
------ -
------------------- --------
--
--这里使用了 ESLint 官方的 eslint:recommended 和 plugin:react/recommended 规则集，同时配置了一些 parserOptions 和 env，以及禁用了 React 组件的 PropTypes 检查。具体配置可以根据项目需要进行调整。
编写 React Hooks 规则
接下来，我们需要自定义一个 ESLint 规则，来检查是否满足 React Hooks 的规范。在项目中创建一个名为eslint-plugin-hooks 的文件夹，并在里面创建一个index.js 文件，代码如下：
-- -------------------- ---- -------
-------------- - -
------ -
----------------------- ----------------------------
--
-------- -
------------ -
-------- ----------
------ -
----------------------- --------
--
--
--
--这里定义了一个名为 hooks/rules-of-hooks 的规则，作用是检查 React Hooks 是否符合官方规范。同时，我们还定义了一个 hooks 插件和一个 recommended 配置，让使用者可以方便地扩展和继承我们定义的规则。
然后，我们需要在 rules-of-hooks.js 文件中实现我们的规则，代码如下：
-- -------------------- ---- -------
-------------- - -
----- -
----- ----------
----- -
------------ -------- ----- -- -------
--------- --------- --------
------------ -----
---- --------------------------------------------
--
------- ---
--
------- -------- --------- -
----- --------- - --- ------
----- ------------ - --- ------
--- ----- - --
-------- --------------- -
--- ------ - ------------
----- ------- -- ----------- --- ---------------------- -
-- -------------------------- -
------ -----
-
------ - --------------
-
------ ------
-
-------- --------------- -
----- ---- - ---------------------------
---------------- -- -
----- - ---- - - ----
-- ------ -
--------------------
-
---
-
-------- --------------- -
-- ---------- --- ----------------- -
-- ----------------- --- ---------- -- ---------------- --- ------------- -
-- ------ --- -- -
----------------
-----
-------- --- --- ---- --------------------- -- --- --------- -- - ------------
---
-
----------------
-------
-
-- ----------------- --- ----------- -- ---------------- --- ------------------ -
-- ------ --- - -- ----------------- -
----------------
-----
-------- --- --- ---- --------------------- -- --- --------- -- - --------- ------ --- ---- - ----- ------ -- ---- --------
---
-
-
-- ----------------- --- ------------- -
-- ------ --- -- -
----------------
-----
-------- --- --- ---- ------------ -- --- --------- -- - ---------- -------- --- --- ---- ---- - ---------------- ----- --- ---- -- ------ --- ------------
---
-
-
-
-
-------- ---------- -
----- -- --
-
-------- ---------- -
----- -- --
-
-------- ---------------- -
-----------------------
-
-------- ----------- -
-----------
---------------------
-- --------------- --- ----------------- -
------ ----------------
-------- ----------- --- ----- ------ ------------
-----
---
-
----------------------------------
-----------
-
-------- --------------------------- -
-- ----------------- --- ------- -- ------------------ --- --------- -
----------------
-----
-------- --- --- --- -------------- -- ---- -------- ------- -- - ----- ---------- --- - ----- ----- ----------
---
-
-
------ -
--------------- ----------
------------------- - ---------------- ----------
--------------------- -------------------- ------ -- -
------------
--
------------------------------------ ------------------------------ ------ -- -
-- ------------------------------------------------------ -
------------
-
--
---------------- -----------
----------------- ----------------------
--
--
--该规则通过遍历 AST（抽象语法树）来检查是否满足 React Hooks 的使用规范。具体包括以下方面：
- 检查
useState和useReducer是否都在函数体内部使用，并且使用了正确的依赖数组。 - 检查
useEffect和useLayoutEffect是否都在函数体内部使用，并且使用了正确的依赖数组或实现了早返回。 - 检查
useContext是否都在函数体内部使用。 - 检查
React.useRef是否都用于调用类组件的实例方法，是否使用了 ES6 类的类字段代替。
使用自定义规则
最后，我们需要将自定义规则加入到项目的 ESLint 配置中，这里采用继承刚刚定义的eslint-plugin-hooks 的 recommended 规则集的方式。只需要在.eslintrc.js 的配置中添加如下代码即可：
module.exports = {
extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:hooks/recommended'],
// 其他配置...
};然后，当我们使用不规范的 Hooks 写法时，ESLint 就会自动提示出错误信息，帮助我们及时修复：
-- -------------------- ---- -------
-------- -------- --- -- -
-- ----- -
------------ -- -
--------------------------- -- -
------------------
---
-- ------- ----------- ----
---
-
----- ------ -------- - ---------------
-- -- --- ---- ---------- -- --- --------- -- - ----------
-- --- -- ------ - -------- -- - ------
-结论
通过自定义 ESLint 规则对 React Hooks 的使用进行校验，可以帮助我们及时捕获代码中的常见问题，并且保证代码符合社区的最佳实践，增加代码的可读性和可维护性。同时，这种方式也可以运用到其他代码检查场景中，增加项目的稳健性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67057a74d91dce0dc8537b16