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

前端加加,关注公众号

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

起因:

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

image.png

百思不得其解,项目已经引入 eslint-plugin-其他应收款是什么科目react-hooks 了,这种应该在 eslint 阶其他货币资金段就告警了。实在不应该提交上来。

定位问题

首先,找到问题css3动画效果代码

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 这个源码. 我们来看看源码解析是怎云计算技术与应用专业么样的。


                                            官方检测 React-hook 的 ESLint 有 bug ?image.png
                                            官方检测 React-hook 的 ESLint 有 bug ?image.png

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

解决问题

想着给官方提一个bug,不知道要等到猴年其他货币资金包括哪些内容马月。而且感觉官方是“有意”限制使用 memo,forwardRef其他综合收益属于什么科目 包最佳实践裹的函数才触发这个逻辑。所以自己重新写了一个包 eslint-plugin-react-hooks-mobx ,支持云计算导论 obser插件开发ve 包裹的函数检测 re云计算技术与应用专业act-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 时要关注的点又少了一点,????


                                            官方检测 React-hook 的 ESLint 有 bug ?image.png

Esli云计算大数据nt 插件开发小 TIP

  • 插件开发文档 h云计算技术与应用ttpcss3动画s://cn.eslint.org/docs/developer-guid其他货币资金包括哪些内容e/wo其他rking-with-rules
  • ESLint官方为了方便开发者开发插件,提供了使用Yeoman (​​genera其他应收款是什么科目tor-eslint​​),创云计算是什么意思建规则,目录都可以直接调用命令
  • ESLi谷歌插件开发nt 使用 JS 解析器 espree 将 JS 代码解css3动画析成云计算分为哪些类型 AST , 平时写规则的时候,可以到 https://astexplorer.net/ 分析代码规则。

写在最后

日常在团队中需要频繁注意,容易引起 bug 的代码,可以通过自己编写 eslin谷歌插件开发tcss3动画 插件来彻底避免~