前言：eslint我们常应用在代码静态扫描中，通过设定的eslint的语法规则，来对代码进行检查，通过规则来约束代码的风格，以此来提高代码的健壮性，避免因为代码不规范导致应用出现bug的可能。而规则是自由的，你可以设定内部自己团队适用的规则，也可以直接使用开源社区比较热门的规则集合, 比如airbnb、eslint-plugin-vue等
目录
1.eslint的配置
1.1 parse
1.2 parseOption
1.3 rules
1.4 extends（扩展） 与 plugins（插件）
2 开发eslint插件
2.1 eslint插件初始化
2.2 创建rule规则
2.3 编写规则
2.4 单元测试
2.5 关于发布
2.6 如何使用
1.eslint的配置
手写规则前，让我们重温下eslint配置，通常我们是使用.eslintrc.js来配置eslint的，或者也可以直接package.json中定义eslintConfig的属性
image.png
上图👆是eslint主要的配置，我们简单回顾下每个配置的背后包含的意义
1.1 parse
parse 是用来定义eslint所使用的解析器，默认是使用Espree🔗, 解析器的作用是将代码code转化成为一种AST抽象语法树，eslint中叫ESTree,你可以理解为将code翻译为ESLint能听👂懂的话
关于Espree可以参考下面这个例子
image.png
而常用的解析器还有包括以下几种
Esprima: 上文提到espree就是基于Esprima改良的
Babel-esLint：一个对Babel解析器的包装，当你项目中使用了babel，babel的解析器会把你的code转换为 AST，然后该解析器会将其转换为ESLint能懂的 ESTree。这个目前我们应用的较多，目前也不再维护和更新，升级为@babel/eslint-parser
@typescript-eslint/parser: 将 TypeScript 转换成与 estree 兼容的形式，以便在ESLint中使用。
对于AST的模拟生成，感兴趣的同学可以使用astexplorer在线尝试
image.png
总结：无论你使用那种解析器，本质是都是为了将code转换为ESLint能够阅读的语言ESTree🔗
1.2 parseOption
parserOptions参数是用来控制parse解析器, 主要包括以下几个属性👇，我们挑重点的讲讲
image.png
ecmaVersion：用来指定你想要使用的 ECMAScript 版本，默认设置为 5，举个例子：默认情况下，ESLint 支持 ECMAScript 5 语法，但如果你想让eslint使用es6特征来支持，就可以通过修改parserOptions中"ecmaVersion": 6
1.3 rules
rules就是eslint的规则，你可以在rules配置中根据在不同场景、不同规范下添加自定义规则详情可参考之前🌲树酱的 前端规范那些事
1.4 extends（扩展） 与 plugins（插件）
extends和plugins很容易混淆，本质是为了加强eslint的扩展性，使得我们可以直接使用别人已经写好的eslint 规则，方便快捷的应用到项目中，有点类似之前文章中Babel配置傻傻看不懂？提及的babel配置中的present和plugin
比如你使用extends去扩展 { "extends": [ "eslint:recommended", "plugin:react/recommended", "eslint-config-standard", ]}
但是如果你想用插件，其实等价于 {"plugin": ['react','standard']}
⏰ 提醒：官方规定 npm 包的扩展必须以 eslint-config- 开头，我们使用过程中可以省略这个开头，上面案例中 eslint-config-standard 可以直接简写成 standard。同样，如果要开发一个eslint插件，也是需要以这种形式来命名，下节会介绍