从0到1开发一个简单的 eslint 插件

前言：eslint咱们常应用在代码静态扫描中，经过设定的eslint的语法规则，来对代码进行检查，经过规则来约束代码的风格，以此来提升代码的健壮性，避免由于代码不规范致使应用出现bug的可能。而规则是自由的，你能够设定内部本身团队适用的规则，也能够直接使用开源社区比较热门的 规则集合, 好比airbnb、eslint-plugin-vue等

1.eslint的配置

手写规则前，让咱们重温下eslint配置，一般咱们是使用 .eslintrc.js来配置eslint的，或者也能够直接 package.json中定义eslintConfig的属性

上图👆是eslint主要的配置，咱们简单回顾下每一个配置的背后包含的意义

1.1 parse

parse 是用来定义eslint所使用的解析器，默认是使用 Espree 🔗, 解析器的做用是将代码code转化成为一种AST抽象语法树，eslint中叫 ESTree,你能够理解为将code翻译为 ESLint能听👂懂的话

关于Espree能够参考下面这个例子

而经常使用的解析器还有包括如下几种

• Esprima: 上文提到espree就是基于Esprima改良的
• Babel-esLint：一个对Babel解析器的包装，当你项目中使用了babel，babel的解析器会把你的code转换为 AST，而后该解析器会将其转换为ESLint能懂的 ESTree。这个目前咱们应用的较多，目前也再也不维护和更新，升级为@babel/eslint-parser
• @typescript-eslint/parser: 将 TypeScript 转换成与 estree 兼容的形式，以便在ESLint中使用。

对于AST的模拟生成，感兴趣的同窗可使用astexplorer在线尝试

总结：不管你使用那种解析器，本质是都是为了将code转换为ESLint可以阅读的语言ESTree🔗

1.2 parseOption

parserOptions参数是用来控制parse解析器, 主要包括如下几个属性👇，咱们挑重点的讲讲

• ecmaVersion：用来指定你想要使用的 ECMAScript 版本，默认设置为 5，举个例子：默认状况下，ESLint 支持 ECMAScript 5 语法，但若是你想让eslint使用es6特征来支持，就能够经过修改parserOptions中"ecmaVersion": 6

1.3 rules

rules就是eslint的规则，你能够在rules配置中根据在不一样场景、不一样规范下添加自定义规则

1.4 extends（扩展） 与 plugins（插件）

extends和plugins很容易混淆，本质是为了增强eslint的扩展性，使得咱们能够直接使用别人已经写好的eslint 规则，方便快捷的应用到项目中

好比你使用extends去扩展 { "extends": [ "eslint:recommended", "plugin:react/recommended", "eslint-config-standard", ]}

可是若是你想用插件，其实等价于 {"plugin": ['react','standard']}

⏰ 提醒：官方规定 npm 包的扩展必须以 eslint-config- 开头，咱们使用过程当中能够省略这个开头，上面案例中 eslint-config-standard 能够直接简写成 standard。一样，若是要开发一个eslint插件，也是须要以这种形式来命名，下节会介绍

咱们再举个列子

上图咱们经过上面这个配置例子，咱们能够看到要么是plugins:[]要么是extends:[]，经过上图所示的配置二相对于配置一少了parser, parserOptions 和 plugins 等的信息配置，但其实这两个配置最终实现的结果是一致的，这是由于配置二中定义的extends：plugin:@typescript-eslint/recommended 会自动加载上叙提到的其余几个配置信息

2 开发eslint插件

经过上一节对eslint的配置的了解，接下来看看如何从0到1开发一个eslint插件。

2.1 eslint插件初始化

ESLint 官方为了方便开发者，提供了使用Yeoman脚手架的模板( generator-eslint🔗)。以此方便咱们经过该脚手架拉取eslint插件模版，对Yeoman 进一步了解能够阅读🌲树酱的 前端工程化那些事 - yeoman

• 第一步：安装 npm install -g yo generator-eslint
• 第二步：建立一个文件夹并而后经过命令行初始化ESLint插件的项目结构 yo eslint:plugin
• 第三步：完成插件初始化建立

2.2 建立rule规则

完成插件项目结构初始化建立后，开始生成ESLint插件中具体规则，在ESLint插件的项目中执行命令行 yo eslint:rule，来生成eslint规则的模版，实际效果以下所示

建立成功后，咱们看下最终的目录结构

• docs: 使用文档，描述你编写的规则
• lib/rules 目录：规则开发源码文件 (例如，no-extra-semi.js)
• tests/lib/rules 目录： 单元测试文件 (例如，no-extra-semi.js)

2.3 编写规则

当完成上面一系列操做以后，eslint插件模版初步完成，接下来咱们找到目录中 lib/rules中对刚刚建立的rule进行开发

假设咱们有个场景，咱们想建立一个规则，用来判读代码中是否存在console方法的调用，首先回到第一节提到的parse解析器，本质上rule的逻辑判断是经过识别Espree返回的抽象语法🌲去判断，分别针对各类类型定义检查方法。写代码以前，咱们先看下console返回的AST是长啥样？

经过上图咱们能够清晰的看到 console.log()是属于 ExpressionStatement(表达式语句)中的 CallExpression(调用语句)，能够经过callee属性中的object来判断是否为console, 同时也能够利用其property属性来判断是console的哪一种方法，好比log、info等

so~ 咱们开始造玩具,咱们经过在 create 返回的对象中，定义一个 CallExpression 方法，当ESLint开始对esTree遍历时，经过对调用语句的监听，来检查该调用语句是否为 console 调用，代码以下👇

每条 rule 就是一个 node 模块，其主要由 meta 和 create 两部分组成，重点讲下下面两个👇

• meta: 表明了这条规则的元数据，包含类别，文档，可接收的参数的 schema 等, 其中主要提下schema，若是指定该选项，ESLint能够经过识别的传参，避免无效的规则配置（排除校验），可参考下节介绍的单元测试的中传递的options
• context.report()：它用来发布警告或错误（取决于你所使用的配置）

🌲 推荐阅读：

• Eslint - Working with Rules

2.4 单元测试

当完成eslit插件开发后，咱们须要对开发完的插件进行验证，以此来保证规则校验功能的正常使用。eslint插件开发项目结构中默认使用了 mocha做为单元测试框架

咱们对tests/rules/treegogo.js单元测试文件进行修改，定义invalid与valid的不一样例子

最后执行

2.5 关于发布

在发布以前，还须要对packjson中main定义入口文件即 lib/index.js，暴露出rules与configs

👨‍🎓 啊宽同窗：那我如何定义一个包含配置的集合呢？

是的，官方文档描述：你能够在一个插件中在 configs 键下指定打包的配置。当你想提供不止代码风格，并且但愿提供一些自定义规则来支持它时，会很是有用。每一个插件支持多配置，而后当你使用的时候，能够经过这样使用 `{

"extends": ["plugin:tree-eslint/myConfig"]

}, `这就包含预设好的规则配置

最后是npm发布 npm pulish

2.6 如何使用

经过第一节的配置的介绍，咱们须要有个 .eslintrc文件，若是目录没用能够经过命令行 eslint -init初始化，配置好后，安装刚刚开放好的eslint插件

配置一能够对咱们开发的那个rule 进行配置：error,warn,off，若是须要对部分作排除就加上option，也能够像配置二引用预设好的扩展extends

你好，我是🌲 树酱，请你喝杯🍵 记得三连哦～

1.阅读完记得点个赞哦，有👍 有动力

2.关注公众号前端那些趣事，陪你聊聊前端的趣事

3.文章收录在Github frontendThings 感谢Star✨