前言：eslint咱们常利用在代码动态扫描中，通过设定的eslint的语法规定，来对代码进行查看，通过规定来束缚代码的格调，以此来进步代码的健壮性，防止因为代码不标准导致利用呈现bug的可能。而规定是自在的，你能够设定外部本人团队实用的规定，也能够间接应用开源社区比拟热门的规定汇合, 比方airbnb、eslint-plugin-vue等

1.eslint的配置

手写规定前，让咱们重温下eslint配置，通常咱们是应用.eslintrc.js来配置eslint的，或者也能够间接package.json中定义eslintConfig的属性

上图是eslint次要的配置，咱们简略回顾下每个配置的背地蕴含的意义

1.1 parse

parse 是用来定义eslint所应用的解析器，默认是应用Espree, 解析器的作用是将代码code转化成为一种AST形象语法树，eslint中叫ESTree,你能够了解为将code翻译为ESLint能听懂的话

对于Espree能够参考上面这个例子

而罕用的解析器还有包含以下几种

  • Esprima: 上文提到espree就是基于Esprima改进的
  • Babel-esLint：一个对Babel解析器的包装，当你我的项目中应用了babel，babel的解析器会把你的code转换为 AST，而后该解析器会将其转换为ESLint能懂的 ESTree。这个目前咱们利用的较多，目前也不再保护和更新，降级为@babel/eslint-parser
  • @typescript-eslint/parser: 将 TypeScript 转换成与 estree 兼容的模式，以便在ESLint中应用。

对于AST的模仿生成，感兴趣的同学能够应用astexplorer在线尝试

总结：无论你应用那种解析器，实质是都是为了将code转换为ESLint可能浏览的语言ESTree

1.2 parseOption

parserOptions参数是用来管制parse解析器, 次要包含以下几个属性，咱们挑重点的讲讲

  • 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 规定，方便快捷的利用到我的项目中

比方你应用extends去扩大 { "extends": [ "eslint:recommended", "plugin:react/recommended", "eslint-config-standard", ]}

然而如果你想用插件，其实等价于 {"plugin": ['react','standard']}

⏰ 揭示：官网规定 npm 包的扩大必须以 eslint-config- 结尾，咱们应用过程中能够省略这个结尾，下面案例中 eslint-config-standard 能够间接简写成 standard。同样，如果要开发一个eslint插件，也是须要以这种模式来命名，下节会介绍

咱们再举个列子

上图咱们通过下面这个配置例子，咱们能够看到要么是plugins:[]要么是extends:[]，通过上图所示的配置二绝对于配置一少了parser, parserOptions 和 plugins 等的信息配置，但其实这两个配置最终实现的后果是统一的，这是因为配置二中定义的extends：plugin:@typescript-eslint/recommended 会主动加载上叙提到的其余几个配置信息

2 开发eslint插件

通过上一节对eslint的配置的理解，接下来看看如何从0到1开发一个eslint插件。

2.1 eslint插件初始化

ESLint 官网为了不便开发者，提供了应用Yeoman脚手架的模板(generator-eslint)。以此不便咱们通过该脚手架拉取eslint插件模版，对Yeoman 进一步理解能够浏览树酱的前端工程化那些事 - yeoman

  • 第一步：装置 npm install -g yo generator-eslint
  • 第二步：创立一个文件夹并而后通过命令行初始化ESLint插件的我的项目构造 yo eslint:plugin
  • 第三步：实现插件初始化创立

2.2 创立rule规定

实现插件我的项目构造初始化创立后，开始生成ESLint插件中具体规定，在ESLint插件的我的项目中执行命令行 yo eslint:rule，来生成eslint规定的模版，实际效果如下所示

创立胜利后，咱们看下最终的目录构造

  • docs: 应用文档，形容你编写的规定
  • lib/rules 目录：规定开发源码文件 (例如，no-extra-semi.js)
  • tests/lib/rules 目录： 单元测试文件 (例如，no-extra-semi.js)

2.3 编写规定

当实现下面一系列操作之后，eslint插件模版初步实现，接下来咱们找到目录中lib/rules中对刚刚创立的rule进行开发

假如咱们有个场景，咱们想创立一个规定，用来判读代码中是否存在console办法的调用，首先回到第一节提到的parse解析器，实质上rule的逻辑判断是通过辨认Espree返回的形象语法去判断，别离针对各种类型定义查看办法。写代码之前，咱们先看下console返回的AST是长啥样？

通过上图咱们能够清晰的看到 console.log()是属于 ExpressionStatement(表达式语句)中的 CallExpression(调用语句)，能够通过callee属性中的object来判断是否为console, 同时也能够利用其property属性来判断是console的哪种办法，比方log、info等

so~ 咱们开始造玩具,咱们通过在 create 返回的对象中，定义一个 CallExpression 办法，当ESLint开始对esTree遍历时，通过对调用语句的监听，来查看该调用语句是否为 console 调用，代码如下

每条 rule 就是一个 node 模块，其次要由 meta 和 create 两局部组成，重点讲下上面两个

  • meta: 代表了这条规定的元数据，蕴含类别，文档，可接管的参数的 schema 等, 其中次要提下schema，如果指定该选项，ESLint能够通过辨认的传参，防止有效的规定配置（排除校验），可参考下节介绍的单元测试的中传递的options
  • context.report()：它用来公布正告或谬误（取决于你所应用的配置）

举荐浏览：

  • Eslint - Working with Rules

2.4 单元测试

当实现eslit插件开发后，咱们须要对开发完的插件进行验证，以此来保障规定校验性能的失常应用。eslint插件开发我的项目构造中默认应用了mocha作为单元测试框架

咱们对tests/rules/treegogo.js单元测试文件进行批改，定义invalid与valid的不同例子

最初执行

2.5 对于公布

在公布之前，还须要对packjson中main定义入口文件即lib/index.js，暴露出rules与configs

啊宽同学：那我如何定义一个蕴含配置的汇合呢？

是的，官网文档形容：你能够在一个插件中在 configs 键下指定打包的配置。当你想提供不止代码格调，而且心愿提供一些自定义规定来反对它时，会十分有用。每个插件反对多配置，而后当你应用的时候，能够通过这样应用 `{

"extends": ["plugin:tree-eslint/myConfig"]

}, `这就蕴含预设好的规定配置

最初是npm公布 npm pulish

2.6 如何应用

通过第一节的配置的介绍，咱们须要有个.eslintrc文件，如果目录没用能够通过命令行eslint -init初始化，配置好后，装置刚刚凋谢好的eslint插件

配置一能够对咱们开发的那个rule 进行配置：error,warn,off，如果须要对局部做排除就加上option，也能够像配置二援用预设好的扩大extends

你好，我是 树酱，请你喝杯 记得三连哦～

1.浏览完记得点个赞哦，有 有能源

2.关注公众号前端那些趣事，陪你聊聊前端的趣事

3.文章收录在Github frontendThings 感激Star✨