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

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

这篇文章目的是介绍如何创建一个ESLint插件和创建一个ESLint rule,用以帮助我们更深入的理解ESLint的运行原理,并且在有必要时可以根据需求创建出一个完美满足自己需求的Lint规则。

插件目标

禁止项目中setTimeout的第二个参数是数字。

PS: 如果是数字的话,很容易就成为魔鬼数字,没有人知道为什么是这个数字, 这个数字有什么含义。

使用模板初始化项目: 1. 安装NPM包

ESLint官方为了方便开发者开发插件,提供了使用Yeoman模板(generator-eslint)。

对于Yeoman我们只需知道它是一个脚手架工具,用于生成包含指定框架结构的工程化目录结构。

npm install -g yo generator-eslint 2. 创建一个文件夹: mkdir eslint-plugin-demo cd eslint-plugin-demo 3. 命令行初始化ESLint插件的项目结构: yo eslint:plugin

下面进入命令行交互流程,流程结束后生成ESLint插件项目框架和文件。

? What is your name? OBKoro1 ? What is the plugin ID? korolint // 这个插件的ID是什么 ? Type a short description of this plugin: XX公司的定制ESLint rule // 输入这个插件的描述 ? Does this plugin contain custom ESLint rules? Yes // 这个插件包含自定义ESLint规则吗? ? Does this plugin contain one or more processors? No // 这个插件包含一个或多个处理器吗 // 处理器用于处理js以外的文件 比如.vue文件 create package.json create lib/index.js create README.md

现在可以看到在文件夹内生成了一些文件夹和文件,但我们还需要创建规则具体细节的文件。

4. 创建规则

上一个命令行生成的是ESLint插件的项目模板,这个命令行是生成ESLint插件具体规则的文件。

yo eslint:rule // 生成 eslint rule的模板文件

创建规则命令行交互:

? What is your name? OBKoro1 ? Where will this rule be published? (Use arrow keys) // 这个规则将在哪里发布? ❯ ESLint Core // 官方核心规则 (目前有200多个规则) ESLint Plugin // 选择ESLint插件 ? What is the rule ID? settimeout-no-number // 规则的ID ? Type a short description of this rule: setTimeout 第二个参数禁止是数字 // 输入该规则的描述 ? Type a short example of the code that will fail: 占位 // 输入一个失败例子的代码 create docs/rules/settimeout-no-number.md create lib/rules/settimeout-no-number.js create tests/lib/rules/settimeout-no-number.js 加了具体规则文件的项目结构 . ├── README.md ├── docs // 使用文档 │   └── rules // 所有规则的文档 │   └── settimeout-no-number.md // 具体规则文档 ├── lib // eslint 规则开发 │   ├── index.js 引入+导出rules文件夹的规则 │   └── rules // 此目录下可以构建多个规则 │   └── settimeout-no-number.js // 规则细节 ├── package.json └── tests // 单元测试 └── lib └── rules └── settimeout-no-number.js // 测试该规则的文件 4. 安装项目依赖 npm install

以上是开发ESLint插件具体规则的准备工作,下面先来看看AST和ESLint原理的相关知识,为我们开发ESLint rule 打一下基础。

AST——抽象语法树

AST是: Abstract Syntax Tree的简称,中文叫做:抽象语法树。

AST的作用

将代码抽象成树状数据结构,方便后续分析检测代码。

代码被解析成AST的样子

astexplorer.net是一个工具网站:它能查看代码被解析成AST的样子。

如下图:在右侧选中一个值时,左侧对应区域也变成高亮区域,这样可以在AST中很方便的选中对应的代码

AST 选择器:

下图中被圈起来的部分,称为AST selectors(选择器)。

AST 选择器的作用:使用代码通过选择器来选中特定的代码片段,然后再对代码进行静态分析。

AST 选择器很多,ESLint官方专门有一个仓库列出了所有类型的选择器: estree

下文中开发ESLint rule就需要用到选择器,等下用到了就懂了,现在知道一下就好了。

将代码解析成AST

ESLint的运行原理

在开发规则之前,我们需要ESLint是怎么运行的,了解插件为什么需要这么写。

1. 将代码解析成AST

ESLint使用JavaScript解析器Espree把JS代码解析成AST。

PS:解析器:是将代码解析成AST的工具,ES6、react、vue都开发了对应的解析器所以ESLint能检测它们的,ESLint也是因此一统前端Lint工具的。

2. 深度遍历AST,监听匹配过程。

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

3. 触发监听选择器的rule回调

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

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