eslint 是很有名的 linter，地球上每一个 JavaScript 程序员都应该晓得。

linter 是一种代码动态剖析工具，它能够帮你找到代码中可能存在的谬误与 bug，也能找出代码格调的问题，不过因为只是动态剖析，对 js 这种动静类型的语言所能做的就比拟无限了，毕竟在 js 中，变量的类型如果不执行就不容易晓得，有些谬误就不那么容易被找进去，尽管如此，能做的查看还是很多了。

装置

装置 eslint 自身只须要装置 eslint 自身就够了，而且 eslint 自带一些规定，不装置任何插件就做到根本的查看，但个别还是须要装置一些插件。

$ yarn add --dev eslint

eslint 除了能够装置插件外，还能够装置另外两个货色，总共有 3 种：

  • plugin：eslint 的插件能够帮 eslint 减少规定，另外也能够通过配置文件让程序员增加本人的规定，插件能够提供一份默认的举荐配置
  • config：能够重复使用的规定配置文件，比拟有名的是 standard 和 airbnb 的规定，配置文件有可能会有依赖的插件，须要本人去装置
  • parser：用来裁减 eslint 能够解决的语法，有用 babel 转换 js 的 babel-eslint ，让 eslint 能够解决实验性的语法；@typescript-eslint/parser 能够让 eslint 解决 Typescript；还有 vue-eslint-parser 用来解决 vue 代码。

应用

尽管装置很简略，但不对 eslint 进行配置是什么都不能做的，所以还要提供一个根本的配置，而 eslint 提供一个简略的初始化命令，通过执行这个命令并答复几个问题，eslint 就会产生一个根本的配置：

$ yarn eslint --init

eslint 的配置文件能够是 js、json 或 yml 的格局，在这里咱们用 js 格局，文件要取名为 .eslintrc.js，这里就用根本的配置，即只用 eslint:recommended 这组设置，如果有其它的插件也像这样进行根本的设置：

module.exports = {  extends: 'eslint:recommended',}

eslint 的配置文件有几个根本的配置项，在这里也顺便说几个我罕用的 config 的插件，首先是 config 的局部：

  • eslint-config-standard：很有名的配置，它还须要另外装置 4 个插件
  • eslint-config-prettier：用来关掉排版相干配置项的配置文件，因为要交给 prettier 解决，关掉就不会引发抵触了。

我还没有列出 standard 所相依的插件：

  • eslint-plugin-simple-import-sort：可能主动排序 import 的一个插件
  • eslint-plugin-eslint-comments：用来查看 eslint 的非凡注解的一个插件，eslint 能够用非凡的注解开关规定，这些等下会讲到，这个插件的用处是不容许敞开了规定后不再关上，以及关掉所有规定。

把下面的内容都写到配置文件中应该是这样：

module.exports = {  extends: [    'standard',    // 加上 prettier 的配置，关掉部份款式查看，程序很重要    'prettier',    'prettier/standard',    // 如果是插件提供的配置项须要以 `plugin:` 开始    'plugin:eslint-comments/recommended',  ],  // 额定的规定，这里也能够决定是否要关掉某些规定  rules: {    // 设置 plugin `eslint-plugin-simple-import-sort` 的 `sort` 规定是 `error`，也就是不合乎时是会报错的    // 另外还能够设置为 `warn` 只正告，或是 `off` 关掉    // 有的规定也有选项，这是就要用 ['error', {<options>}] 这种像 babel 的格局了    'simple-import-sort/sort': 'error',  },  // 配置指定的环境，这会影响到判断哪些是全局变量  env: {    browser: true  },  // 设置 eslint 本人的 parser 用的是哪一版本的 js ，个别设置为 eslint --init 就行了  parserOptions: {    ecmaVersion: 12,  },}

运作原理

eslint 跟 babel 很类似，都是先把文件转成 AST，如果想查看 eslint 转进去的 AST ，能够到 AST Explorer 抉择 espree 解析器，这是 eslint 内置的解析器，它和 babel 的解析器不太一样，应该说是 babel 的解析器和他人不一样才对，ECMAScript 定义了一套 js 的 AST 该怎么定义的规定，是 babel 和他人不同，另外 eslint 的解析器须要很具体的信息，不能只有代码的同步而已，而这样能力做好 lint 的工作。

它的运作形式也像 babel 一样，让 plugin XML visitor 对特定的节点进行查看，如果发现有问题就通过它的 API 来报告，也能够通过它的 API 提供修改的程序。

写一个本人的 eslint 插件

接下来写一个 eslint 插件，虽说是写插件，但实际上写的是 eslint 的规定，假如咱们心愿 js 的对象是这样的（比方 vue 的 object）：

export default {  name: 'Foo',  props: {},  data: () => ({}),}

像下面这样两头都有个空行，能够用两种很简略的办法来判断是不是 vue 的对象：

  • 在 export default 之后
  • 蕴含在 Vue.extend 中

eslint 的规定大抵分为meta 和 create 两个局部：

  • meta：这个规定的形容，如果这个规定能够被主动修复，也必须要定义在这里
  • create：建设规定的 AST visitor，规定的查看是在这里做的

与 babel 插件很像，第一步是先关上 AST Explorer，选 eslint 用的解析器 espree，这里要替换的是 ObjectExpress

module.exports = {  meta: {    // 能够被修复的规定肯定要定义，这里除了 'whitespace' 外还有 'code' ，不过常识分类上的问题    // 这里因为是要加换行，所以选 'whitespace'    fixable: 'whitespace',    // 能够定义可能会呈现的信息，这就能够进行对立治理。这是 eslint 的举荐做法    // 你也能够间接把数据写在 context.report    messages: {      requireNewline: 'require newline between',    },  },  create: function (context) {    return {      ObjectExpression(node) {        if (          // 判断副节点是否为 export default          node.parent.type === 'ExportDefaultDeclaration' ||          // 或父节点是 `Vue.extend`          (node.parent.type === 'CallExpression' && isVueExtend(node.parent.callee))        ) {          // 失去 source code 对象，前面的 fixer 须要用到          const sourceCode = context.getSourceCode()          // 用 for 循环把对象的属性每两个气氛一组，查看两头有没有加空行          for (let i = 0; i < node.properties.length - 1; ++i) {            // 这里的判断办法很简略，上一个属性结尾的行号必须与下一个属性结尾的行号相差 2 以上            // 也就是两头有两个以上的空行            if (node.properties[i + 1].loc.start.line - node.properties[i].loc.end.line < 2) {              context.report({                // 用事后定义的数据                messageId: 'requireNewline',                // 或是你能够间接把数据写进来                // message: 'require newline between',                // 指定出错的地位，因为是在两个属性之间，所以就用上一个的 end 与后一个的 start 来指定                loc: {                  start: node.properties[i].loc.end,                  end: node.properties[i + 1].loc.start,                },                // 如果出错的地位正好是某个 AST 的节点，那也能够传入节点                // node: node                fix(fixer) {                  // 这里是主动修复的局部稍后再加上                },              })            }          }        }      },    }  },}

失常来说 eslint 的插件须要照着 eslint 的命名规定能力加载，不过为了不便测试，就间接调用 eslint 的函数把自定义的规定退出：

// eslint 的 Linterconst { Linter } = require('eslint')// 咱们要定义的规定const rule = require('./space-between-properties')const linter = new Linter()// 为规定设定一个 idconst id = 'space-between-properties'// 退出规定定义，也就是下面的那个货色linter.defineRule(id, rule)// 执行规定const res = linter.verify(  `export default {  name: 'Foo',  props: {},}`,  {    rules: {      [id]: 'error',    },    parserOptions: {      sourceType: 'module',      ecmaVersion: 2015,    },  })// 如果有谬误的话就打印进去if (res.length) {  console.log(res)}

不出意外的话应该会看到有内容输入，接着要加上主动修复的局部：

// 接下面的 fix 部份fix(fixer) {  // 获得两个节点两头的 token  const tokens = sourceCode.getTokensBetween(node.properties[i], node.properties[i + 1])  // “通常”两头只会有逗号，所以惟一的节点就是逗号  const comma = tokens[0]  // 要求 eslint 在都好前面加上换行  return fixer.insertTextAfterRange(comma.range, '\n')}

修复也很简略，就是在逗号前面加上换行而已，不过下面也特地说了是“通常”，其实这个插件你只有在 , 前面加上注解就会呈现问题了

eslint 会在最初一次把修复加上去，而后再跑一次所有规定，如果还是有能够修复的问题就再跑一次，直到没有能够主动修复的问题为止，所以也不必放心会毁坏其余插件所提供的规定。不过如果呈现了规定互相冲突会怎么呢，如果有趣味的话能够本人来试试。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13个帮你进步开发效率的古代CSS框架
  • 疾速上手BootstrapVue
  • JavaScript引擎是如何工作的？从调用栈到Promise你须要晓得的所有
  • WebSocket实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30分钟用Node.js构建一个API服务器
  • Javascript的对象拷贝
  • 程序员30岁前月薪达不到30K，该何去何从
  • 14个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把HTML转成PDF的4个计划及实现
  • 更多文章...