快速创建 ESLint 插件

[mileOfSunshine]

第一步，安装 yeoman 和 generator-eslint

• Yeoman 是现代化前端项目的脚手架工具，用于生成包含指定框架结构的工程化目录结构。
• generator-eslint 是 Yeoman 的 ESLint生成器。它提供了创建插件所需要的所有模版代码。

npm install -g yo # or yarn global add yo
npm install -g generator-eslint # or yarn global add generator-eslint

第二步，初始化项目

mkdir eslint-plugin-heroes
cd eslint-plugin-heroes

yo eslint:plugin

接下来系统将提示您输入有关插件的信息，它将生成一个package.json文件，README和存根插件的源代码。

第三步，创建规则 这里我们创建一个禁止使用 alert() 函数的规则

悄悄告诉你：generator-eslint 插件也有生成规则模版的命令o

yo eslint:rule

我们再根据系统提示完成规则配置。

此时，可以清楚的看到系统已经自动为我们生成了 no-alert 相关的文件 docs\rules\no-alert.md, lib\rules\no-alert.js, tests\lib\rules\no-alert.js。作为开发者，这种体验我真的很满意。

第四步，编写规则

这怕是最难的咯...

要求：

• 了解 AST 抽象语法树
• 阅读过 ESLint 官方文档

ESLint 使用了一个叫做 Espree 的 JavaScript 解析器来把 JavaScript 代码解析为一个抽象语法树(AST) 。这里推荐一个将 JavaScript 代码转化为抽象语法树的在线网站——astexplorer。由于开发的是 ESLint 插件，我们需将解析器设置为 espree。

当我们在左侧输入 alert('Hello World!');，你可以在右侧发现一个完整的抽象树

alert('Hello World!'); 就是一个表达式 CallExpression，所以我们的关注点可以聚焦在这。具体怎么实现可参考官方的 no-alert

第五步，执行测试