如何在项目中创建一个ESLint插件？

创建ESLint插件

现在已经有很多实用的ESLint插件了。在Tumblbug，我们是eslint-config-airbnb和eslint-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，可以看到规则正确运行了！