eslint
对于前端开发者，eslint是比较常用的代码规范和错误检查工具，eslint非常强大，不仅提供了大量的常用rules，而且允许开发者根据实际需要自定义rule,通过开发eslint-plugin把自定义rule加入到eslint正常检查过程中，简单方便。
如何自定义rule，以及开发eslint-plugin呢？
这里以一个简单的示例来演示一下如何开发自己的rule以及plugin。
示例需求：检查js文件中 class name 是否与 parent folder name 相同，如果不同，就给出报错
先看官方文档对于自定义rule的示例以及一些属性的说明，下面敲黑板，划重点，要考的😂
- rule 是一个对象，里面有个方法 create ，参数是 context ，这里面有很多属性 方法，根据自己的需要，使用对应的方法属性，我们要获取 parent folder name ，所以使用 getFilename() 这个方法，这个方法返回文件的绝对路径，可以使用字符串方法得到父文件夹名称。
- create 必须返回一个 object ，看文档的介绍
create
文档里的 node 是AST语法树中的node，推荐一个AST在线转换网站
class转换
由上图可见，我们要使用的 node type 是 ClassDeclaration ， - 直接上代码：
文件目录
├── README.md
├── __tests__
│ └── rules
│ └── index.js
├── jest.config.js
├── lib
│ ├── index.js
│ └── rules
│ └── checkClassName.js
├── package.json
└── yarn.lock
checkClassName.js
module.exports = {
meta: {
docs: {}
},
create(context) {
return {
"ClassDeclaration": function (node) {
// 参数 node 就是 AST 里面 ClassDeclaration 对象
const filePath = context.getFilename();
const filePatchArr = filePath.split('/');
const folderName = filePatchArr[filePatchArr.length - 2];
if (filePath.indexOf('/src/view') > -1 && node.id && node.id.name !== folderName) {
// 过滤文件
context.report({ node, message: 'class 名称与文件夹名称不一致，class name is \'' + node.id.name + '\'.' })
// 抛出报错信息
}
}
}
}
}
lib/index.js
const rule = require('./rules/checkClassName.js');
module.exports.rules = {
'check-pview-name': rule
};
在项目里使用，编辑.eslintrc文件：
{
"plugins": [
"eslint-plugin-check-class-name"
// 你 publish 的 npm 包名称，可以省略 eslint-plugin
],
"rules": {
"check-class-name/check-name": "error"
// plugin name / rule
}
}
目录中的test文件就不展示了，我这里也没用到，具体的单元测试，网上一大堆文档可以参考。我这里的测试是通过在项目中的node_modules里某个eslint-plugin源码中加入自己的代码，慢慢调试，虽然很low，但是很方便快速🙃
如此，一个非常简单的eslint-plugin开发完成，重点还是要体会eslint对拓展插件的应用方式，由简及繁，慢慢进阶。
网友评论