上文说了eslint配置之自定义规则，今天说下ESLint`之插件开发，前文传送门，
eslint从入门到放弃（二）esLint配置之globals
eslint从入门到放弃（三）ESLint配置之env（三）
eslint从入门到放弃（五）eslint配置之extends（共享配置）
eslint从入门到放弃（六）eslint 配置之plugins（插件）
大家好我是【小枫学幽默】，这是我eslint从入门到放弃系列教程的第八篇插件开发，欢迎关注后续更新。接下来步入正题：
ESLint配置之插件开发
插件是做什么的？
插件是用来扩展ESLint的，也就是说，通过插件，我们可以自定义规则、 配置、 环境、处理器，然后多个项目中共享这些配置。也可以发布到npm，让其他开发者使用。典型的插件如eslint-plugin-react、eslint-plugin-vue等。
本次我们将自定义一个插件，实现两个功能：
-
- 自定义一个规则，禁止使用
forbiddenVar作为变量名
- 自定义一个规则，禁止使用
-
- 自定义一个规则，限制函数的参数个数
插件开发
准备工作
让我们先新建一个
demo目录，文件结构如下
demo
├── .eslintrc.js # eslint配置文件
├── package.json # 项目配置文件
└── index.js # 入口文件
安装
eslint
npm install eslint --save-dev
# 当前demo 使用的 eslint 版本为 3.14.1
插件的命名规范
插件命名规范为eslint-plugin-xxx，其中xxx为插件名称，比如eslint-plugin-react，eslint-plugin-vue等。
我们今天开发的插件名就叫做eslint-plugin-my-plugin吧，是的就是这么随意！！！
创建插件目录及入口文件
mkdir eslint-plugin-my-plugin
cd eslint-plugin-my-plugin
touch index.js
mkdir rules
npm init -y
// eslint-plugin-my-plugin/package.json
{
"name": "eslint-plugin-my-plugin",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"test": "tests"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
目录结构如下：
demo
├── eslint-plugin-my-plugin # 插件目录
│ └── index.js # 插件入口文件
│ └── rules # 插件规则目录
│ └── package.json # 插件配置文件
├── .eslintrc.js # eslint配置文件
├── package.json # 项目配置文件
└── index.js # 入口文件
创建第一个规则，使用上一篇文章中我们实现的
no-forbidden-var.js规则，将其拷贝进my-plugin/rules目录中
回顾下上文的no-forbidden-var.js规则（这个规则校验代码中是否使用了forbiddenVar作为变量名，如果使用，则抛出错误）
// my-plugin/rules/no-forbidden-var.js
module.exports = {
meta: {
type: "suggestion",
docs: {
description: "禁止使用特定的变量名",
},
schema: [], // 规则配置项
},
create(context) {
return {
VariableDeclaration(node) {
node.declarations.forEach((declaration) => {
// 当变量名为 forbiddenVar 时，抛出错误，并提示禁止使用 forbiddenVar 作为变量名
if (declaration.id.name === 'forbiddenVar') {
context.report({
node,
message: '禁止使用forbiddenVar作为变量名',
});
}
});
},
};
},
};
创建规则后的目录结构如下：
demo
├── eslint-plugin-my-plugin # 插件目录
│ └── index.js # 插件入口文件
│ └── rules # 插件规则目录
│ └──-──- no-forbidden-var.js # 不允许使用forbiddenVar作为变量名的规则
├── .eslintrc.js # eslint配置文件
├── package.json # 项目配置文件
└── index.js # 入口文件
插件入口文件引入刚刚创建的规则
// eslint-plugin-my-plugin/index.js
module.exports = {
rules: {
'no-forbidden-var': require('./rules/no-forbidden-var'),
}
}
插件使用
eslint配置文件中引入插件
// .eslintrc.js
module.exports = {
"plugins": [
'eslint-plugin-my-plugin',
],
"rules": {
// 禁止使用未定义的变量
"no-undef": "error",
// 禁止使用forbiddenVar作为变量名
"eslint-plugin-my-plugin/no-forbidden-var": ['error']
}
}
将插件链接到系统
如果你正在本地开发插件，你可能想要链接它到你的项目，这样你就可以在本地测试它，而不需要每次都发布到npm。在你的插件目录中运行：
npm link
在demo目录中运行以下命令来链接你的插件：
npm link eslint-plugin-my-plugin
在
demo目录中创建index.js文件，并编写以下代码：
// index.js
// 故意使用forbiddenVar作为变量名
var forbiddenVar = 1
使用 eslint 检查代码
cd demo
npx eslint index.js -c .eslintrc.js
检查结果
# demo
1:1 error 禁止使用forbiddenVar作为变量名 eslint-plugin-my-plugin/no-forbidden-var
一个规则就完成了，是不是很简单；但是如果一个插件只有一个规则，那插件的意义就不大了，接下来我们再创建一个规则。
创建max-params规则
假设我们实现一个规则，用来校验函数的参数个数，如果函数的参数个数大于3个，则抛出错误。规则的名字就叫做max-params吧。
创建规则
规则相关的
AST语法树
// eslint-plugin-my-plugin/rules/max-params.js
module.exports = {
meta: {
type: "suggestion",
docs: {
description: "限制函数参数个数，最大为3个参数",
category: "Stylistic Issues",
recommended: false,
},
},
create(context) {
// 获取配置中的最大参数个数，默认为3
const maxParamsCount = 3
return {
FunctionDeclaration (node) {
const { params, id } = node;
const paramsCount = params.length;
if (paramsCount > maxParamsCount) {
context.report({
node,
message: `函数 ${id.name} 的参数为 ${paramsCount} 个. 最多允许的函数参数个数为：${maxParamsCount}.`,
});
}
},
};
},
};
创建规则后的目录结构如下：
demo
├── eslint-plugin-my-plugin # 插件目录
│ └── index.js # 插件入口文件
│ └── rules # 插件规则目录
│ └──-──- no-forbidden-var.js # 不允许使用forbiddenVar作为变量名的规则
│ └──-──- max-params.js # 限制函数的参数个数
├── .eslintrc.js # eslint配置文件
├── package.json # 项目配置文件
└── index.js # 入口文件
修改插件入口文件，引入新规则
// eslint-plugin-my-plugin/index.js
module.exports = {
rules: {
'no-forbidden-var': require('./rules/no-forbidden-var'),
'max-params': require('./rules/max-params'),
},
}
修改demo目录中的.eslintrc.js文件，引入新规则
// .eslintrc.js
module.exports = {
"plugins": [
'eslint-plugin-my-plugin',
],
"rules": {
// 禁止使用未定义的变量
"no-undef": "error",
// 禁止使用forbiddenVar作为变量名
"eslint-plugin-my-plugin/no-forbidden-var": ['error'],
// 函数参数个数限制为3个
"eslint-plugin-my-plugin/max-params": ['error'],
}
}
修改demo目录中的index.js文件，增加一个参数个数大于3的函数
// index.js
// 故意使用forbiddenVar作为变量名
var forbiddenVar = 1
// 故意创建一个参数个数大于3的函数
function add (a, b, c, d) {
return a + b + c + d
}
使用 eslint 检查代码
cd demo
npx eslint index.js -c .eslintrc.js
检查结果
# demo
1:1 error 禁止使用forbiddenVar作为变量名 eslint-plugin-my-plugin/no-forbidden-var
2:1 error 函数 add 的参数为 4 个. 最多允许的函数参数个数为：3 eslint-plugin-my-plugin/max-params
发布插件
npm发布
cd eslint-plugin-my-plugin
npm login
npm publish
总结
通过以上步骤，我们成功创建了一个名字为eslint-plugin-my-plugin的eslint插件，并实现了no-forbidden-var 和 max-params两个规则。通过自定义插件，我们可以实现一些eslint官方没有提供的规则，从而满足我们的需求。
也可以在不同的项目中复用，提高开发效率、也可以共享给其他开发者使用。
下一篇，我们继续探讨eslint插件的高级用法：配置、 环境、处理器、自动修复、忽略规则等。
欢迎关注我的个人公众号「「小枫学幽默」」一起成长，一起分享生活！！
