Eslint自定义规则(三)

前期回顾

防止迷路 三个文件

看了之前自定义规则一、二的文章，一、讲了自定义规则的创建以及使用，二、结合vscode进行测试。那么这次我结合之前的经历，准备写一个稍微复杂一点的规则：

文件中注释行数不超过总代码行数的5%

1：当然5%是动态可以自己配置的

2：代码解释型注释、产品需求变更产生的注释 不要求计算在内 规则名为comments-less-then npm包在这里，这次主要目标不是放在如何写规则上，这些只要对照官方文档(这里我要狠狠地吐槽下， 对照官方文档写规则真是😭太不详细了)和eslint源码就行（此时的最新版本是v7.0.0-alpha.0），而是把精力放在出现的问题上。

使用规则

在之前majun-dt工程目录下重新安装eslint-plugin-mjlint

修改.eslintrc.js

百分比可以通过配置动态设置。

出现的问题

写好规则在正式使用majun-dt中没有问题。但是在跑测试时eslint-plugin-mjlint工程目录下运行npm run test测试我们的规则是否通过，我们可以通过规则（二）中结合vscode进行测试 会有以下的错误

comments-less-then规则中提示代码错误的message

可以在lib/rules/comments-less-then.js中设置断点F5

单步调试F11进入函数，单步跳过F10执行

可以看到descriptor中只有messageId，没有将messageId和我们自己定义的fallbackerror进行映射。 再次单步调试F11进入函数

至此问题就找到了 message为undefined

以同样的方法我们来调试下eslint源码(v7.0.0-alpha.0)中max-lines-per-function规则（如何传配置百分比就是看的这里）

单步调试F11进入函数，单步跳过F10执行

从上图可以看到messageId对应的exceed已经映射为message

好了到此就是我当时解决查看的debugger

解决问题

最后重点来了，我在调试的过程中发现两次的调试代码不一样以及结合下图，发现可能是eslint版本的原因，于是去查看了版本

eslint源码中版本是v7.0.0-alpha.0

majun-dt有于是自己npm装的eslint好想也是比较新的6.8.0

eslint-plugin-mjlint由于使用官方推荐的工具生成的工程目录 eslint版本是~3.9.1 ，索性我就把版本更新为6.8.0

这也就解释了为什么写好的插件在正式使用没问题，而在自己跑测试中却出现了问题，原因是在正式使用majun-dt中eslint为较新版，而在跑测试时eslint-plugin-mjlint中eslint为~3.9.1

还原问题eslint-plugin-mjlint@0.0.9

真的想好好的吐槽一波😫😫😫`，本来文档就写的不详细，结果官方推荐生成规则工程目录的工具也出现这样的问题，白白让我花费时间调试，奔溃。。。 好了，同学你不要嫌我啰嗦，我只是记录下我的历程。同学，我就到这了，剩下的，你来吧。