lucknessbuaa

创建ESLint插件

原文链接: medium.com

创建ESLint插件

现在已经有很多实用的ESLint插件了。在Tumblbug,我们是eslint-config-airbnbeslint-plugin-react的粉丝。然而,随着项目规模的扩大,你会感受到添加自定义规则来确保开发人员遵循好的实践的必要性。在这篇博客中,我将会讲述如何一步一步地创建一个ESLint插件,并且在这个插件里面写一个规则。

设置

首先,安装Yeoman和方便的generator-eslint,它提供了创建插件所需要的所有模版代码。

npm install -g yonpm install -g generator-eslint

接下来,为插件新建一个目录并且初始化这个目录:

mkdir eslint-plugin-tutorialcd eslint-plugin-tutorial

yo eslint:plugin

? What is your name? ...? What is the plugin ID? tutorial? Type a short description of this plugin: ...? Does this plugin contain custom ESLint rules? Yes? Does this plugin contain one or more processors? No

npm install

创建规则

现在,到了创建规则的时候了!我们将创建一个禁止下面代码的规则:

var _ = require('your favorite fp library');

因为这会给当前模块引入太多的代码,使得难以执行tree-shaking

让我们开始编写规则吧!generator-eslint插件也有生成规则模版的命令。

yo eslint:rule

? What is your name? ...? Where will this rule be published? ESLint Plugin? What is the rule ID? no-full-fp-lib? Type a short description of this rule: ...? Type a short example of the code that will fail: var _ = require('your favorite fp library');

在正式开始规则的编写之前,我们需要了解一下JavaScript是如何被解析的。ESLint使用了一个叫做Espree的JavaScript解析器来把JavaScript代码解析为一个抽象语法树(AST) 。规则可以“监听”语法树中特定类型的结点,当发现一个匹配的结点的时候,规则就会被触发去检验是否需要采取某些行为。幸运地是,有一个非常方便的把JavaScript代码转化为抽象语法树的在线网站,叫做astexplorer。因为我们将会使用ESLint默认的Espree解析器去解析代码,所以最好把网站默认的‘Acorn’解析器改为‘Espree’。

下面的抽象语法树是由我们想要禁用的代码生成的:

抽象语法树提供了创建规则所需要的全部信息。首先,可以看到我们感兴趣的结点类型是VariableDeclaration,它包含了一系列的VariableDeclarator。可以通过查看每一个VariableDeclarator,然后检查_id_属性的name属性是否为___并且init属性的callee是否为require来实现这个规则。查看ESLint文档获取编写规则更深入的解释。

把上面的规则逻辑转化为代码,我们得到:

测试

可以很容易地通过安装Mocha并且在package.json文件里面编写测试脚本来测试我们的规则:

“scripts”: { “test”: “mocha ./tests/**/*.js” },

我们已经有了一些通过generator-eslint生成的代码,所以我们要做的就是填充错误信息,类型以及添加一些测试用例!

使用下面的代码执行mocha测试:

npm run test

可以看到所有的测试用例都通过了!

ES6+

写一个ES6的校验规则要更困难些,因为需要额外的配置使得代码能正常运行。我们仍然可以使用上面的AST explorer网站生成一个抽象语法树,但是需要确保在parser选项里面使用了恰当的ECMAScript版本。

使用ES6的语法写与上面的等价代码,我们现在需要禁止下面的导入语句:

import _ from 'my favorite fp lib';

我们使用和上面同样的逻辑写这个ES6版本的规则,代码如下:

为了测试这个规则,我们需要给ESLint提供一些额外的配置使它知道如何去运行这个规则。首先,因为我们使用的是ES6的语法,所以需要把ecmaVersion设置成6,并且因为我们的规则使用了import语法,所以还需要设置一个标志去支持这个语法。关于更多可以使用的不同特性的列表可以在ESLint文档中找到。

测试代码如下:

执行npm run test,可以看到规则正确运行了!

打包

既然我们的规则已经写完并且通过了测试,剩下的就是打包了。

因为ESLint默认不会开启任何规则,我们可能会想要导出一个配置来启用我们的规则:

推荐的配置项可以通过扩展来配置我们其它的项目

剩下的就是可选的把插件包发布到npm上,并且在我们其它的项目里面安装和使用!

查看Github上的项目仓库

快乐校验!

更新: 非常感谢Ilya Volodin分享了很多有用的资源!这篇文章现在比原先要简洁的多!