ESLint简介

Lint是什么？

* Lint 是检验代码格式工具的一个统称

* 这类工具主要做两件事情：

       -- 提供编码规范；

       -- 提供自动检验代码的程序，并打印检验结果

Lint发展史

随着互联网发展，网站内容更加丰富，交互更加复杂，前端项目越来越庞大；2009 年，NodeJS 的诞生使得 JavaScript 可以跑在服务端，更是让其地位更加突出，再加之 JavaScript 本身设计上存在许多缺陷，代码不严谨也可能就会触发神奇的错误。 

1、JSLint 出现，确实帮助许多 JavaScript 开发者节省了不少排查代码错误的时间。但是 JSLint 的问题也很明显——几乎不可配置，所有的代码风格和规则都是内置好的。  

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

3、后来，Zakas 大佬发现 JSHint 也无法满足自己定制化规则的需求了，设想发明一个基于 AST 的 lint，可以动态执行额外的规则，同时可以很方便的扩展规则。

2013 年的 6 月份，Zakas发布了全新的 lint 工具——ESLint。ESLint 的出现并没有撼动 JSHint 的霸主地位。由于前者是利用 AST 处理规则，用 Esprima 解析代码，执行速度要比只需要一步搞定的 JSHint 慢很多；其次当时已经有许多编辑器对 JSHint 支持完善，生态足够强大。

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

2016 年，JSCS 开发团队认为 ESLint 和 JSCS 实现原理太过相似，而且需要解决的问题也都一致，最终选择合并到 ESLint，并停止 JSCS 的维护。 至此，ESLint 完美躺赢，替代 JSHint 成为前端主流工具。

ESLint简介

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。

 ESLint完全可配置，主要有两种方式来配置ESLint：

1、 在注释中配置：使用JavaScript注释直接把配置嵌入到JS文件中。 

 2、 配置文件：使用下面任一的文件来为全部的目录和它的子目录指定配置信息。 

      --  javascript：使用.eslintrc.js文件并导出一个包含配置的对象。

      -- package.json：在package.json文件中创建eslintConfig属性，所有的配置包含在此属性中。 

      -- YAML：.eslintrc.yaml或者.eslintrc.yml JSON：.eslintrc.json，并且此文件允许使用JS形式的注释   

 这些文件的优先级则是按照以上出现的顺序（.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json）。

 可以被配置的信息主要分为3类： 

Environments： javascript 脚步将要运行在什么环境（如：nodejs，browser，commonjs等）。 

Globals：执行代码时脚步需要访问的额外全局变量。  

Rules：开启某些规则，也可以设置规则的等级。

---

文件配置方式

env：你的脚本将要运行在什么环境中

Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等

'env': {

    'browser': true,

    'commonjs': true,

    'es6': true

  },

globals：额外的全局变量

globals: {

    vue: true,

    wx: true

  },

rules：开启规则和发生错误时报告的等级

规则的错误等级有三种：

0或’off’：关闭规则。

1或’warn’：打开规则，并且作为一个警告（并不会导致检查不通过）。

2或’error’：打开规则，并且作为一个错误 (退出码为1，检查不通过)。

参数说明：

参数1 ： 错误等级

参数2 ： 处理方式

配置代码注释方式

有时我们可能要在代码中忽略eslint的某种检查，或者加入某种特定检查，此时我们可以用如下的方式：

示例：

忽略 no-undef 检查

/* eslint-disable no-undef */

忽略 no-new 检查

/* eslint-disable no-new */

设置检查

/eslint eqeqeq: off/

/eslint eqeqeq: 0/

eslint 检查指令

检查且修复

eslint * --fix

检查指定文件

eslint app.js --fix

---

---

---

WebStorm配置：

https://www.jianshu.com/p/f6d3a5c5d545

ESLint规则说明：

https://www.jianshu.com/p/5e6ee862d6d5

ESLint使用及配置，推荐看这篇文章

https://www.jianshu.com/p/ad1e46faaea2