前端工具-定制ESLint 插件以及了解ESLint的运行原理 (3)

修改一下lib/rules/index.js文件:

'use strict'; var requireIndex = require('requireindex'); const output = { rules: requireIndex(__dirname + '/rules'), // 导出所有规则 configs: { // 导出自定义规则 在项目中直接引用 koroRule: { plugins: ['korolint'], // 引入插件 rules: { // 开启规则 'korolint/settimeout-no-number': 'error' } } } }; module.exports = output;

使用方法:

使用extends来继承插件的配置,extends不止这种继承方式,即使你传入一个npm包,一个文件的相对路径地址,eslint也能继承其中的配置。

// .eslintrc.js module.exports = { extends: [ 'plugin:korolint/koroRule' ] // 继承插件导出的配置 }

PS : 这种使用方式, npm的包名不能为eslint-plugin-xx-xx,只能为eslint-plugin-xx否则会有报错,被这个问题搞得头疼o(╥﹏╥)o

扩展:

以上内容足够开发一个插件,这里是一些扩展知识点。

遍历方向:

上文中说过: 在拿到AST之后,ESLint会以"从上至下"再"从下至上"的顺序遍历每个选择器两次。

我们所监听的选择器默认会在"从上至下"的过程中触发,如果需要在"从下至上"的过程中执行则需要添加:exit,在上文中CallExpression就变为CallExpression:exit。

注意:一段代码解析后可能包含多次同一个选择器,选择器的钩子也会多次触发。

fix函数:自动修复rule错误

修复效果

// 修复前 setTimeout(() => { }, 1000) // 修复后 变量名故意写错 为了让用户去修改它 const countNumber1 = 1000 setTimeout(() => { }, countNumber2)

在rule的meta对象上打开修复功能:

// rule文件 module.exports = { meta: { docs: { description: 'setTimeout 第二个参数禁止是数字' }, fixable: 'code' // 打开修复功能 } }

在context.report()上提供一个fix函数:

把上文的context.report修改一下,增加一个fix方法即可,更详细的介绍可以看一下。

context.report({ node, message: 'setTimeout第二个参数禁止是数字', fix(fixer) { const numberValue = timeNode.value; const statementString = `const countNumber = ${numberValue}\n` return [ // 修改数字为变量 fixer.replaceTextRange(node.arguments[1].range, 'countNumber'), // 在setTimeout之前增加一行声明变量的代码 用户自行修改变量名 fixer.insertTextBeforeRange(node.range, statementString), ]; } }); 项目地址:

eslint-plugin-korolint

呼~ 这篇博客断断续续,写了好几周,终于完成了!

大家有看到这篇博客的话,建议跟着博客的一起动手写一下,动手实操一下比你mark一百篇文章都来的有用,花不了很长时间的,希望各位看完本文,都能够更深入的了解到ESLint的运行原理。

觉得我的博客对你有帮助的话,就关注一下/点个赞吧!

前端进阶积累、公众号、GitHub、wx:OBkoro1、邮箱:obkoro1@foxmail.com

基友带我飞

ESLint插件是向基友yeyan1996学习的,在遇到问题的时候,也是他指点我的,特此感谢。

参考资料:

创建规则
ESLint 工作原理探讨

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspdgy.html