官方检测 React-hook 的 ESLint 有 bug ？

最新推荐文章于 2024-03-01 21:21:24 发布

weixin_46961967

最新推荐文章于 2024-03-01 21:21:24 发布

阅读量585

点赞数

文章标签： js javascript web dart html

本文链接：https://blog.youkuaiyun.com/weixin_46961967/article/details/119583493

版权

点击上方前端加加，关注公众号

回复加群，加入前端加加技术交流群

起因：

团队在项目中定位一个很奇怪的问题，错误信息不明确，定位了很久才发现是 react rule 规则的问题。

image.png

百思不得其解，项目已经引入 eslint-plugin-react-hooks 了，这种应该在 eslint 阶段就告警了。实在不应该提交上来。

定位问题

首先，找到问题代码

const PreviewItemInner = observer((props: IProps & RouteComponentProps<Imatch>) => { 
    if(!x) {return null }
    
    // 触发了 react rule 的代码 
    const [y, setY] = useState(false);

});

猜测：是否用 observer 包裹的函数无法触发 react-hook-eslint 对应的规则？那我们先找到 eslint-plugin-react-hooks 这个源码. 我们来看看源码解析是怎么样的。

image.png

从源码中可以看到，只有是普通函数，箭头函数，还有 memo ，forwardRef 包裹的函数，才会触发这个逻辑校验… 使用 observer 包裹的函数，是无法触发这个规则的。

解决问题

想着给官方提一个bug，不知道要等到猴年马月。而且感觉官方是“有意”限制使用 memo，forwardRef 包裹的函数才触发这个逻辑。所以自己重新写了一个包 eslint-plugin-react-hooks-mobx ，支持 observe 包裹的函数检测 react-hook 规则。

使用如下：

tnpm install eslint-plugin-react-hooks-mobx --save-dev

.eslintrc.js 配置如下：

module.exports = {
  plugins: ['react-hooks-mobx'],
  rules: {
    'react-hooks-mobx/rules-of-hooks': 'error',
    'react-hooks-mobx/exhaustive-deps': 'warn',
  },
};

配置完，完美，使用 observer 包裹的函数也可以正常检测了。mr 时要关注的点又少了一点，????

image.png

Eslint 插件开发小 TIP

插件开发文档 https://cn.eslint.org/docs/developer-guide/working-with-rules
ESLint官方为了方便开发者开发插件，提供了使用Yeoman (generator-eslint)，创建规则，目录都可以直接调用命令
ESLint 使用 JS 解析器 espree 将 JS 代码解析成 AST , 平时写规则的时候，可以到 https://astexplorer.net/ 分析代码规则。