Open mileOfSunshine opened 5 years ago
第一步,安装 yeoman 和 generator-eslint
Yeoman
generator-eslint
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() 函数的规则
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。作为开发者,这种体验我真的很满意。
no-alert
docs\rules\no-alert.md
lib\rules\no-alert.js
tests\lib\rules\no-alert.js
第四步,编写规则
这怕是最难的咯...
要求:
ESLint 使用了一个叫做 Espree 的 JavaScript 解析器来把 JavaScript 代码解析为一个抽象语法树(AST) 。这里推荐一个将 JavaScript 代码转化为抽象语法树的在线网站——astexplorer。由于开发的是 ESLint 插件,我们需将解析器设置为 espree。
Espree
JavaScript
espree
当我们在左侧输入 alert('Hello World!');,你可以在右侧发现一个完整的抽象树
alert('Hello World!');
alert('Hello World!'); 就是一个表达式 CallExpression,所以我们的关注点可以聚焦在这。具体怎么实现可参考官方的 no-alert
CallExpression
第五步,执行测试
第一步,安装 yeoman 和 generator-eslint
Yeoman
是现代化前端项目的脚手架工具,用于生成包含指定框架结构的工程化目录结构。generator-eslint
是Yeoman
的ESLint
生成器。它提供了创建插件所需要的所有模版代码。第二步,初始化项目
接下来系统将提示您输入有关插件的信息,它将生成一个package.json文件,README和存根插件的源代码。
第三步,创建规则 这里我们创建一个禁止使用
alert()
函数的规则我们再根据系统提示完成规则配置。![image](https://user-images.githubusercontent.com/17926741/61852496-3539b500-aeec-11e9-8568-ccdb477f0034.png)
此时,可以清楚的看到系统已经自动为我们生成了
no-alert
相关的文件docs\rules\no-alert.md
,lib\rules\no-alert.js
,tests\lib\rules\no-alert.js
。作为开发者,这种体验我真的很满意。第四步,编写规则
这怕是最难的咯...
要求:
ESLint
官方文档ESLint
使用了一个叫做Espree
的JavaScript
解析器来把JavaScript
代码解析为一个抽象语法树(AST) 。这里推荐一个将JavaScript
代码转化为抽象语法树的在线网站——astexplorer。由于开发的是ESLint
插件,我们需将解析器设置为espree
。当我们在左侧输入
alert('Hello World!');
,你可以在右侧发现一个完整的抽象树alert('Hello World!');
就是一个表达式CallExpression
,所以我们的关注点可以聚焦在这。具体怎么实现可参考官方的no-alert
第五步,执行测试