ESLint 简介
ESLint 是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次 eslint 代码检查，就不会因为某个字段未定义为 undefined 或 null 这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。
在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：
ESLint 使用 Espree 解析 JavaScript。
ESLint 使用 AST 去分析代码中的模式。
ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。
使用
安装
ESLint 支持多种安装方式，可以通过 npm 来安装，也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。
全局安装
npm i -g eslint
局部安装（推荐）
npm i -D eslint
初始化
安装完毕后，接下来新建一个配置文件.eslintrc.js，或者使用如下的命令行来自动生成，命令如下：
eslint –init
配置
注意：如果你之前使用的版本低于 1.0.0，请查看 迁移指南。运行 eslint –init 之后，.eslintrc 文件会在你的文件夹中自动创建。文件的内容大体如下：
{
“env”: {
“es6”: true,
“node”: true
},
“extends”: “eslint:recommended”,
“parserOptions”: {
“sourceType”: “script”
},
“rules”: {
“no-console”: 0,
“no-unused-vars”: “error”,
“no-use-before-define”: “error”,
“linebreak-style”: [
“error”,
“unix”
],
“quotes”: [
“error”,
“single”
],
“semi”: [
“error”,
“always”
],
“curly”: [“error”, “all”],
“default-case”: “error”,
“no-else-return”: “error”,
“no-empty-function”: “error”,
“no-implicit-coercion”: “error”,
“no-invalid-this”: “error”,
“no-loop-func”: “error”,
“no-multi-spaces”: “error”,
“no-new-func”: “error”,
“no-useless-return”: “error”,
“global-require”: “error”,
“no-path-concat”: “error”,
“no-sync”: “error”,
“array-bracket-spacing”: [
“error”,
“never”
],
“block-spacing”: [
“error”,
“always”
],
“brace-style”: [
“error”,
“1tbs”
],
“camelcase”: “error”,
“comma-dangle”: [
“error”,
“always-multiline”
],
“comma-spacing”: [
“error”,
{“before”: false, “after”: true}
],
“comma-style”: [
“error”,
“last”
],
“key-spacing”: [
“error”,
{“beforeColon”: false, “afterColon”: true}
],
“lines-around-comment”: [
“error”,
{“beforeBlockComment”: true}
],
“newline-after-var”: [
“error”,
“always”
],
“newline-before-return”: “error”,
“no-multi-assign”: “error”,
“max-params”: [1, 3],
“new-cap”: [
“error”,
{
“newIsCap”: true,
“capIsNew”: false
}
],
“no-multiple-empty-lines”: [
“error”,
{
“max”: 2
}
],
“no-shadow-restricted-names”: “error”,
“no-undef-init”: “error”,
“keyword-spacing”: “error”,
“space-before-blocks”: [
“error”,
“always”
]
}
}
ESlint 支持的可配置信息主要分为 3 类：
Environments：Javascript 脚步将要运行在什么环境中（如：nodejs，browser，commonjs 等）,ESlint 支持的所有环境都可以在官网查到。
Globals：执行代码时脚步需要访问的额外全局变量。
Rules：开启某些规则，也可以设置规则的等级。
检测规则
接下来，可以在配置文件中设置一些规则。ESLint 规则的三种级别：
“off” 或者 0：关闭规则。
“warn” 或者 1：打开规则，并且作为一个警告（不影响 exit code）。
“error” 或者 2：打开规则，并且作为一个错误（exit code 将会是 1）。
例如，下面的一些配置规则：
“no-console”:”off” 禁用 console。
“no-unused-vars”:2 禁止出现未使用过的变量。
“no-use-before-define”:2 不允许在变量定义之前使用它们。
“linebreak-style”:[2, “unix”] 强制使用一致的换行风格。
“quotes”: [“error”, “single”] 强制使用一致的单引号。
“semi”:[“error”, “always”] 控制行尾部分号。
“curly”:[“error”, “all”] 强制所有控制语句使用一致的括号风格。
“default-case”: “error” switch 语句强制 default 分支，也可添加 // no default 注释取消此次警告。
“no-else-return”:”error” 禁止 if 语句中有 return 之后有 else。
“no-implicit-coercion”: “error” 禁止出现空函数. 如果一个函数包含了一条注释，它将不会被认为有问题。
“no-invalid-this”: “error” 禁止 this 关键字出现在类和类对象之外。
“no-loop-func”:”error” 禁止在循环中出现 function 声明和表达式。
“no-multi-spaces”:”error” 禁止使用多个空格。
“no-new-func”:”error” 禁止对 空 Function 对象使用 new 操作符。
“no-useless-return”:”error” 禁止没有任何内容的 return;
“global-require”: “error” 要求 require() 出现在顶层模块作用域中。
“no-path-concat”: “error” 禁止对 dirname 和 filename 进行字符串连接
“no-sync”: “error” 禁用同步方法。
“array-bracket-spacing”: [“error”, “never”] 指定数组的元素之间要以空格隔开 (, 后面)，never 参数：[之前和] 之后不能带空格，always 参数：[之前和] 之后必须带空格。
“block-spacing”: [“error”, “always”] 禁止或强制在单行代码块中使用空格 (禁用)。
“brace-style”: [“error”, “1tbs”]
“camelcase”: “error” 强制驼峰法命名。
“comma-dangle”: [“error”, “always-multiline”] 数组和对象键值对最后一个逗号，never 参数：不能带末尾的逗号, always 参数：必须带末尾的逗,always-multiline：多行模式必须带逗号，单行模式不能带逗号号。
“comma-spacing”: [“error”, { “before”: false, “after”: true}] 控制逗号前后的空格。
“comma-style”: [“error”, “last”] 控制逗号在行尾出现还是在行首出现 (默认行尾)。
“key-spacing”: [“error”, { “beforeColon”: false, “afterColon”: true}] 该规则规定了在对象字面量语法中，key 和 value 之间的空白，冒号前不要空格，冒号后面需要一个空格。
“lines-around-comment”: [“error”, { “beforeBlockComment”: true}] 要求在注释周围有空行 (要求在块级注释之前有一空行)。
“newline-after-var”: [“error”, “always”] 要求或禁止 var 声明语句后有一行空行。
“newline-before-return”: “error” 要求 return 语句之前有一空行。
“no-multi-assign”: “error” 链接变量的赋值可能会导致意外的结果并难以阅读，不允许在单个语句中使用多个分配。
“max-params”: [1, 3] function 定义中最多允许的参数数量。
“new-cap”: [“error”, { “newIsCap”: true, “capIsNew”: false}] 构造函数首字母大写。
“no-multiple-empty-lines”: [“error”, {“max”: 2}] 空行不能够超过 2 行。
“no-shadow-restricted-names”: “error” 禁止对一些关键字或者保留字进行赋值操作，比如 NaN、Infinity、undefined、eval、arguments 等。
“no-undef-init”: “error” 禁止把 undefined 赋值给一个变量。
“keyword-spacing”: “error” keyword 前后需要空格。
“space-before-blocks”: [“error”,”always”] 强制在块之前使用一致的空格。
忽略检测
既然有检测的规则，那么必然有忽略检测的配置。要新增忽略检测的规则，首先要在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略掉不需要检测的文件或者目录。
或者通过 package.json 文件设置需要忽略检测的对象，例如：
{
“name”: “my_project”,
“version”: “1.0.0”,
“main”: “index.js”,
“scripts”: {
“test”: “”
},
“eslintConfig”: {// 也可配置 eslint
“env”: {
“es6”: true,
“node”: true
}
},
“eslintIgnore”: [“test.js”]
}
Gulp 中使用 ESLint
除了 npm 方式之外，ESLint 还支持 Gulp 插件方式使用，使用之前需要先安装插件。
npm install gulp-eslint
如果要使用 gulp-eslint 进行 eslint 规则的校验，可以使用下面的方式：
var gulp = require(‘gulp’);
var eslint = require(‘gulp-eslint’);
gulp.task(‘lint’,function(){
return gulp.src([‘app/**/*.js’]) // 指定的校验路径
.pipe(eslint({configFle:”./.eslintrc”})) // 使用你的 eslint 校验文件
.pipe(eslint.format())
});
ESLint 技巧
eslint-config-standard
eslint-config-standard 是一个标准的 ESLint 规则检测库，因此只需要安装这个库就可以省去配置 ESLint 规则。然后，在项目的根目录里面手动创建一个.eslintrc 文件，然后在里面添加如下代码：
{
“extends”: “standard”
}
执行完以上步骤，就可以使用 ESLint 这个工具来校验项目里的代码。
在 Vue 项目里，.vue 文件写的是类似于 html 的格式，不是标准的 JavaScript 文件，ESLint 无法直接识别.vue 文件里的 JavaScript 代码，那么这个时候我们需要去安装一个工具，安装命令如下：
npm i eslint-plugin-html -D
因为在 vue 文件里面写 JavaScript 代码也是写在 script 标签里面的，这个插件的作用就是识别一个文件里面 script 标签里面的 JS 代码，官方也是这么推荐的。所以我们要在.eslintrc 文件里面新增一段脚本：
{
“extends”: “standard”,
“plugins”: [
“html”
]
}
执行完以上步骤后，我们跳转到 package.json 文件里面的 scripts 里面新增一条命令：
“lint”: “eslint –ext .js –ext .jsx –ext .vue src/”
在上面的脚本命令中，ext 后面需要写上指定检测文件的后缀，如.js、.jsx、.vue 等，紧接着后面要写上一个参数，这个参数就是我们要检测哪个目录下面的文件，一般项目文件都在 src 下面，所以在后面写上 src/ 就好。
现在我们就可以到 terminal 里面输入 $ npm run lint，来检验项目里的代码是否符合 ESLint 的规则。
ESLint 自动修复报错
一般来说，当我们使用命令“npm run lint”检测 JavaScript 的时候，基本上都会出现非常的多报错，基本上就是满屏的 error 和 warning。在报这么多的错误之后，如果我们一条一条地去修复，就会变的非常的麻烦，相信刚接触 ESLint 的童鞋都深有体会。其实这些错误都可以让 ESLint 帮助我们自动地修复。具体来说，只需要在 package.json 文件里面的 scripts 里面新增一条命令即可：
“lint-fix”: “eslint –fix –ext .js –ext .jsx –ext .vue src/”
当我们再去 terminal 中执行命令：$ npm run lint-fix，你会发现没有那么多飘红的报错，也没有满屏的 error 和 warning 了。
当然，还有一种万能方法，就是在报错的 JS 文件中第一行写上 / eslint-disable /，具体可以参考 Command line Interface
eslint-loader
有时候，我们希望在项目开发的过程当中，每次修改代码都能够自动进行 ESLint 的检查。因为在我们改代码的过程中去做一次检查，如果有错误，我们就能够很快地去定位到问题并解决问题。这时候我们可以借助 eslint-loader 插件。
npm i eslint-loader babel-eslint -D
执行完安装操作后，我们还需要在.eslintrc 文件里面配置如下脚本：
{
“extends”: “standard”,
“plugins”: [
“html”
],
“parser”: “babel-eslint”
}
为什么我们要配置 parser 呢？因为我们的项目是基于 webpack 的，项目里的代码都是需要经过 babel 去处理的。babel 处理的这种语法可能对 ESLint 不是特别的支持，然后我们使用 loader 处理 ESLint 的时候就会出现一些问题。所以一般来说，我们用 webpack 和 babel 来进行开发的项目，都会指定它的 parser 使用 babel-eslint。
同时，使用 webpack 方式构建的项目，还需要在 webpack.config.base.js 的 module 下面的 rules 里面添加一个如下脚本：
rules: [
{
test: /\.(vue|js|jsx)$/,
loader: ‘eslint-loader’,
exclude: /node_modules/,
enforce: ‘pre’
},
……
]
然后我们就可以使用命令 $ npm run dev 就可以在开发环境进行 ESLint 错误检测。
附：https://cn.eslint.org/https://www.imooc.com/article…