hooks-checker

hooks-checker

现如今 react hooks 的使用已经非常普遍，但在使用过程中还是时常会犯一些低级错误。

就比如在使用 useEffect 的时候未传第二个 dependency 参数，从而造成意想不到的结果（排查半天最后才发现是这个疏忽而导致的）。本工具就是用来检查 useEffect, useLayoutEffect, useMemo 和 useCallback 在使用的时候是否传了第二个参数。

安装

$ npm install hooks-checker

使用

demo

const Checker = require('hooks-checker');

const code = `
  import { useEffect } from 'react';
  const Foo = () => {
    useEffect(() => {});
    return null;
  };
  export default Foo;
`;

const main = () => {
  const checker = new Checker({ code });
  const dangers = checker.check();
  // warn or error with dangers by yourself
};

main();

output of dangers

[
  {
    "line": 4,
    "column": 4,
    "message": "The second argument is not found in useEffect call.",
  }
]

Checker 参数选项

字段	类型	是否必须	默认值	描述
code	string	否	''	待检查的代码
ast	t.File	否	null	待检查代码对应的 ast
libs	string[]	否	['react']	引入 hooks 的包，也可以是 rax

注意：code 和 ast 不能同时为空。

License

MIT License