Day 29: eslint

eslint 是很有名的 linter ，如果有在写 JavaScript 应该多多少少都会知道，虽然它不该被归类来这系列的主题「建置工具」中，不过它也算是很常用的一个工具，所以我就把它放进这个系列了

linter 这种工具是一种程序码的静态分析工具，它可以帮你抓出程序码可能存在的错误与 bug ，也能找出程序码风格的问题，不过也因为只是静态分析，对 js 这种动态型别的语言能做的就比较有限了，毕竟在 js 中，变数的型态如果不执行就不容易知道，有些错误就不是那麽容易抓出来，虽说如此，能做的检查还是很多就是了

安装

安装 eslint 本身只需要安装 eslint 一个套件而已，而且 eslint 有自带一些规则，所以也可以不安装任何 plugin 就做到基本的检查，只是通常还是会安装 plugin 来使用

$ yarn add --dev eslint

eslint 除了可以安装 plugin 来搭配使用外，也可以安装另外两种东西，加起来共 3 种：

• plugin: eslint 的 plugin 可以帮 eslint 增加规则，另外它其实也可以带有设定档让使用者使用， plugin 可以提供一份自己推荐的设定
• config: 可以重覆使用的设定档，比较有名的有 standard 跟 airbnb ，设定档有可能会有需要的 plugin ，使用者要自己去安装
• parser: 扩充 eslint 可以处理的语法，比如有 babel-eslint 用 babel 来转换 js ，让 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 这组设定，有不少的 plugin 也会像这样提供自己的基本设定：

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

eslint 的设定档有几个基本的栏位，另外这边也顺便讲几个我自己惯用的 config 的 plugin，首先是 config 的部份：

• eslint-config-standard: 有名的设定档，它目前还有另外 4 个必须要装的 plugin ，要使用的要自己装
• eslint-config-prettier: 一个关掉跟排版相关的选项的设定档，因为要交给 prettier 处理，关掉就不会发生冲突了

plugin 这边我并没有列出 standard 所相依的 plugin:

• eslint-plugin-simple-import-sort: 能自动排序 import 的一个 plugin
• eslint-plugin-eslint-comments: 检查 eslint 的特殊注解的一个 plugin ， eslint 可以用特殊的注解开关规则，这等下会讲到，而这个 plugin 基本上就是不允许关了规则就不开，跟关掉所有规则的 plugin

把上面的都写进设定档就会像：

module.exports = {
  // 设定要拿来当基底的设定档
  extends: [
    'standard',
    // 加上 prettier 的设定，关掉部份的样式检查，这顺序很重要的
    // 因为设定是照顺序套用的，如果让 standard 在後面的话，就没办法盖过去了
    'prettier',
    'prettier/standard',
    // 如果是 plugin 提供的设定就要加上 `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 ，上面的 parser 选择 espree ，这是 eslint 内部使用的 parser ，它跟 babel 的 parser 有点不太一样，应该说是 babel 的 parser 跟其他人不一样才是， ECMAScript (js 的标准) 有订一套 js 的 AST 该有哪些节点，怎麽命名的，是 babel 跟别人不同，另外 eslint 的 parser 需要很详细的资讯，不能只有程序码的节点本身而已，这样它才能做好 lint 的工作

它的运作方式也是像 babel 一样，让 plugin 注册 visitor ，对特定的节点进行检查，如果有问题就透过它的 API 做回报，也可以透过它的 API 提供修正的程序，这在下一篇再来说明