Vue开发中使用ESLint

Vue开发中使用ESLint

一、ESLint简介

1. JavaScript 为什么需要 lint

起初 JavaScript 被开发出来的目的只是用在 Web 页面里实现一些简单的交互（例如表单提交）。随着互联网发展，网站需要展示的内容更加丰富，交互也变得复杂，前端项目也越来越庞大；2009 年，NodeJS 的诞生使得 JavaScript 可以跑在服务端，更是让其地位更加突出。在 2017 年 GitHub 开发语言排行榜中，JavaScript 毫无疑问排在第一位

再加上 JavaScript 本身设计上存在许多缺陷，代码不严谨也可能就会触发神奇的错误。例如 == 和 === 的混用，可能会产生类型不一致引起的 Bug，经验不足的开发者很难察觉出异常。

2002 年，Douglas Crockford （译注:《JavaScript 语言精粹》的作者）开发了可能是第一款针对 JavaScript 的语法检测工具 —— JSLint，并于 2010 年开源。

2. JSLint 和 JSHint

JSLint 面市后，确实帮助许多 JavaScript 开发者节省了不少排查代码错误的时间。但是 JSLint 的问题也很明显——几乎不可配置，所有的代码风格和规则都是内置好的；再加上 Douglas Crockford 老爷子推崇道系「爱用不用」的优良传统，不会向开发者妥协开放配置或者修改他觉得是对的规则。于是 Anton Kovalyov 吐槽：「JSLint 是让你的代码风格更像 Douglas Crockford 的而已，并且在 2011 年 Fork 原项目开发了 JSHint。

JSHint 的特点就是可配置，同时文档也相对完善，而且对开发者友好。很快大家就从 JSLint 转向了 JSHint。

3. ESLint 的诞生

起初几年，JSHint 一直是前端代码检测工具的首选，包括 Nicholas C. Zakas （《JavaScript高级程序设计》作者）也是 JSHint 的用户。但在 2013 年，Zakas 大佬发现 JSHint 已经无法满足自己定制化规则的需求，而且和 Anton 讨论后达成共识这根本在不可能在 JSHint 上实现。同时 Zakas 还设想发明一个基于 AST 的 lint，可以动态执行额外的规则，同时可以很方便的扩展规则。

2013 年的 6 月份，Zakas 发布了全新的 lint 工具——ESLint

几乎同一时间，另一款和 ESLint 实现机制类似的代码风格检测工具——JSCS——也诞生了

4. 可扩展性的胜利

ESLint 的出现并没有撼动 JSHint 的霸主地位。由于前者是利用 AST 处理规则，用 Esprima 解析代码，执行速度要比只需要一步搞定的 JSHint 慢很多；其次当时已经有许多编辑器对 JSHint 支持完善，生态足够强大。真正让 ESLint 逆袭的是 ECMAScript 6 的出现。

2015 年 6 月，ES2015 规范正式发布。但是发布后，市面上浏览器对最新标准的支持情况极其有限。如果想要提前体验最新标准的语法，就得靠 Babel 之类的工具将代码编译成 ES5 甚至更低的版本，同时一些实验性的特性也能靠 Babel 转换。这时 JSHint 就略尴尬，ES2015 变化很大，短期内无法完全支持。ESLint 可扩展的优势一下就体现出来了，不仅可以扩展规则，甚至连解析器也能替换。Babel 团队就为 ESLint 开发了 babel-eslint 替换默认解析器，让 ESLint 率先支持 ES2015 语法。

也是在 2015 年，React 的应用越来越广泛，诞生不久的 JSX 也愈加流行。ESLint 本身也不支持 JSX 语法。还是因为可扩展性，eslint-plugin-react 的出现让 ESLint 也能支持当时 React 特有的规则。

2016 年，JSCS 开发团队认为 ESLint 和 JSCS 实现原理太过相似，而且需要解决的问题也都一致，最终选择合并到 ESLint，并停止 JSCS 的维护。

至此，ESLint 完美躺赢，替代 JSHint 成为前端主流工具。

参考文章
https://www.jianshu.com/p/933b6b6a84c9

二、ESLint使用入门

1. 安装

npm安装

npm install eslint --save-dev

没有配置文件是没法进行检查的，我们要新建一个配置文件.eslintrc.js

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

extends: 'eslint:recommended'表示使用ESLint默认的配置，默认配置可以参考页面：https://cn.eslint.org/docs/rules/

2. 测试

我们新建一个用来测试的myfile.js文件

let kk = 9

console.log(window)

console.log('kk', kk == -0)

console.log('bool', !!!kk)

// 前面是一个tab和两个空格
	  console.log('space tab')

运行检查命令

./node_modules/.bin/eslint myfile.js

运行结果：

1:5  error  Parsing error: Unexpected token kk

报这个错是因为ESLint识别不了let，ESLint默认的ECMA解析器的版本是5（可设置为3，5，6（2015），7（2016），8（2017）），我们需要配置ecmaVersion或者直接配置env即可，修改后的.eslintrc.js

module.exports = {
     
  env: {
     
    browser: true,
    es6: true
  },
  extends: 'eslint:recommended'
};

一个环境定义了一组预定义的全局变量，es6启用除了 modules 以外的所有 ECMAScript 6 特性，该选项会自动设置 ecmaVersion 解析器选项为 6。brower让解析器就可以识别出window、console等浏览器才有的一些全局变量。详细的全局变量配置可见：https://cn.eslint.org/docs/user-guide/configuring#specifying-environments

再运行一次检查命令

./node_modules/.bin/eslint myfile.js

运行结果：

5:19  error  Do not use the '==' operator to compare against -0  no-compare-neg-zero
7:22  error  Redundant double negation                           no-extra-boolean-cast
10:1  error  Mixed spaces and tabs                               no-mixed-spaces-and-tabs

3. 修改配置文件

可以通过修改配置文件，全局的修改检查规则

module.exports = {
     
  env: {
     
    browser: true,
    es6: true
  },
  extends: 'eslint:recommended',
  rules: {
     
    "no-mixed-spaces-and-tabs": "off"
  }
};

运行检查命令，结果为：

5:19  error  Do not use the '==' operator to compare against -0  no-compare-neg-zero
7:22  error  Redundant double negation                           no-extra-boolean-cast

可见no-mixed-spaces-and-tabs检查已经没有了

4. 通过注解跳过某行的检查

有时候，在开发过程中，有些代码检查会导致代码编译不通过，导致项目无法启动。我们需要临时的屏蔽掉某些行的代码检查，我们可以通过注释的方式进行。在myfile.js中，我们加上如下的注释

// eslint-disable-next-line
console.log('kk', kk == -0)

运行检查命令，结果为：

7:22  error  Redundant double negation                           no-extra-boolean-cast

可见console.log('kk', kk == -0)该行导致的no-compare-neg-zero报错已经没有了

除此之外，ESLint还支持通过注释屏蔽某段代码甚至整个文件的代码检查，详细可见：https://cn.eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments

跳过某个文件的检查，可以通过新建一个.eslintignore文件，在里面写上需要跳过检查的文件路径即可，类似.gitignore文件。或者也可以在package.json中增加一个数据类型为数组的eslintIgnore字段，将需要跳过检查的文件路径写在里面

5. 自动修复

通过运行eslint --fix命令，ESLint可以为我们自动修改代码来让我们的代码符合规则。但是并不是所有被检查出来的错误都可以被修复，在官网规则页面中，只有带有黄颜色扳手的检查项可以被自动修复。其中 no-extra-boolean-cast 是可以被自动修复的，我们试一下

执行命令：

./node_modules/.bin/eslint myfile.js --fix

可见js内容自动发生了变化

console.log('bool', !kk)

多余的!被自动删除掉了

三、在Vue开发中使用

1. 相关npm包介绍

1.1 eslint

ESLint基础的包，提供了基础ESLint最基础的能力，必须安装

1.2 babel-eslint

ESLint有默认的js解析器，它默认解析器和核心规则仅支持最新的最终ECMAScript标准，不支持Babel提供的实验性（例如新功能）和非标准（例如Flow或TypeScript类型）语法。

babel-eslint是允许ESLint在由Babel转换的源代码上运行的解析器。

注意：仅在使用Babel转换代码时才需要使用babel-eslint。（默认解析器支持所有非实验语法以及JSX，如果没有使用babel则不需要使用babel-eslint）。

举个例子

myfile.js

const a = 1

.eslintrc.js

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

执行检查，检查结果：

1:1  error  Parsing error: The keyword 'const' is reserved

现在我们通过npm安装上babel-eslint，在.eslintrc.js中加上相关配置

module.exports = {
     
  parser: "babel-eslint",
  extends: 'eslint:recommended'
};

执行检查，检查结果：

1:7  error  'bb' is assigned a value but never used  no-unused-vars

可见const已经通过了检查，只是bb变量定义了没有使用报错（babel会将const转成var，从而通过检查）

1.3 vue-eslint-parser

该解析器使我们可以处理vue文件的