手模手配置Eslint，看懂脚手架中的Eslint
使用ESLint前：
eslint是干嘛的，我这样写有什么问题，怎么还报错了，太麻烦想去掉这个插件，脚手架中关于eslint文件里的配置是什么意思？
怎么设置配置项和规则达到自己想要的检测效果呢？怎么集成到VSCODE实现自动修复呢？
所以本片博文介绍ESLint是什么，配置项的意思，启用elsint推荐的规则及eslint-plugin-vue推荐规则检测项目,集成到VScode修复可自动修复的选项。
希望这篇文章可以让你看得懂elsint文件里的配置项及开启/关闭规范规则保持代码规范。
一.ESLint是什么：
- ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。
- ESLint 可以让程序员在编码的过程中发现问题而不是在执行的过程中。
- ESLint 的初衷是为了让程序员可以创建自己的检测规则，所以的所有规则都被设计成可插入的。每条规则各自独立，可以开启或关闭，配置项实现细粒度的控制。
二.配置项：
1.配置方式：
1.1.JavaScript注释:
作用：临时禁止某些lint 规则出现的警告。
使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中
/* eslint-disable */ alert('/* eslint-disable */ 块注释放在文件顶部,整个文件范围内禁止规则出现警告'); /* eslint-disable-next-line */ alert('/* eslint-disable-next-line */块放在上行，本行禁止出现警告'); alert('/* eslint-disable-next-line */块放在本行后行，本行禁止出现警告'); /* eslint-disable-line */ /* eslint-disable no-alert, no-console */ /* eslint-enable no-alert, no-console */ alert('对指定的一个或者多个规则启用或禁用警告'); console.log('对指定的一个或者多个规则启用或禁用警告'); 上面的所有方法同样适用于插件规则： 例如，禁止 eslint-plugin-example 的 rule-name 规则，把插件名（example）和规则名（rule-name）结合为 example/rule-name： foo(); /* eslint-disable-line example/rule-name */
2.配置文件：
作用：一般用配置文件配置eslint
2.1ESLint 支持几种格式的配置文件：
- JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
- YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
- JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
- (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
- package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。
2.2 同一个目录下有多个配置文件的优先级：
同一个目录下有多个配置文件，ESLint 只会 使用 一个。优先级顺序如下：
.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json >.eslintrc(已经弃用) >package.json
2.3 层叠配置:
如下结构：
your-project
├── .eslintrc.js
├── lib
│ └── source.js
└─┬ tests
├── .eslintrc.js
└── test.js
1.层叠配置使用离要检测的文件最近的 .eslintrc文件作为最高优先级，然后才是父目录里的配置文件:
ESLint检测时，lib/ 下面的所有文件将使用项目根目录里的 .eslintrc 文件作为它的配置文件。---对应使用父目录里的配置文件（如有node_modules，node_modules文件夹内依赖的不会被使用，因为不是父目录）
当 ESLint 遍历到 test/ 目录，your-project/.eslintrc 之外，它还会用到 your-project/tests/.eslintrc。
所以 your-project/tests/test.js 是基于它的目录层次结构中的两个.eslintrc 文件的组合，并且离的最近的一个优先。
2.将 ESLint 限制到一个特定的项目：
默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到文件系统的根目录。
为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。
ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
2.4 解析器及解析器选项：
2.4.1 parser配置项:
作用：指定解析JavaScript的解析器。
ESLint 默认使用Espree作为其解析器，解析JavaScript。
{ "parser": "Espree", "parserOptions":{} }
你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求：
它必须是一个 Node 模块，可以从它出现的配置文件中加载。通常，这意味着应该使用 npm 单独安装解析器包。
它必须符合 parser interface。
以下解析器与 ESLint 兼容：
Esprima
babel-eslint - 一个对Babel解析器的包装，使其能够与 ESLint 兼容。
@typescript-eslint/parser - 将 TypeScript 转换成与 estree 兼容的形式，以便在ESLint中使用。
在使用自定义解析器时，为了让 ESLint 在处理非 ECMAScript 5 特性时正常工作，配置属性 parserOptions 仍然是必须的。
解析器会被传入 parserOptions。(使用第三方插件会涉)
2.4.2 parserOptions 配置项：
作用：解析器选项，配置ES版本，sourceType，额外的语言特性。
parserOptions 属性可用的选项有：
1.ecmaVersion - 默认设置为 3，5（默认）， 你可以使用 6（或者年份同 2015）、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。
2.sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
3.ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性:
globalReturn - 允许在全局作用域下使用 return 语句
impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
jsx - 启用 JSX
设置解析器选项能帮助 ESLint 确定什么是解析错误，所有语言选项默认都是 false。
eslint支持 ES6 语法并不意味着同时支持 新的 ES6 全局变量或类型（比如 Set 等新类型）。
对于 ES6 语法，使用 { "parserOptions": { "ecmaVersion": 6 } }，但{ "parserOptions": { "ecmaVersion": 6 } }不自动启用es6全局变量，对于新的 ES6 全局变量，使用 { "env":{ "es6": true } }。
{ "env": { "es6": true } } 自动启用es6语法和启用es6全局变量。
2.5 globals：
作用：提前声明全局变量，以免ESLint 发出警告，有些变量是我们引入的库声明的，需要提前在配置中声明，例如jquery的$。
当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。
如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。
要在配置文件中配置全局变量，请将 globals 配置属性设置为一个对象，该对象包含以你希望使用的每个全局变量。
对于每个全局变量键，将对应的值设置为 "writable" 以允许重写变量，或 "readonly" 不允许重写变量。例如：
{ "globals": { "$": false, "var1": "writable", "var2": "readonly" } }
2.6 env 关键字指定你想启用的环境
作用：在 globals 中一个个的进行声明太过繁琐，使用到 env就能避免这种繁琐 ，env配置是对一个环境定义了一组预定义的全局变量。
可用的环境包括：
- browser - 浏览器环境中的全局变量。
- node - Node.js 全局变量和 Node.js 作用域。
- es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。jquery - jQuery 全局变量。等等。。。
- 这些环境并不是互斥的，所以你可以同时定义多个。
{
"env": {
"browser": true,
"node": true
}
}
2.7 plugins：
作用：使用他人写好的规则插件。
使用第三方（规则）插件。在使用插件之前，你必须使用 npm 安装它，是一个 npm 包，通常输出规则,规则默认关闭。
使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。
{ "plugins": [ "plugin1", "eslint-plugin-plugin2" ] }
2.8 extends：
作用：启用规则继承。
启用的规则继承，属性值可以是：
1.指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
2.字符串数组：每个配置继承它前面的配置
extends 属性值可以由以下组成：
包名 (省略了前缀，比如，react)
/
配置名称 (比如 recommended)
"plugins": [ "vue" ], "extends": [ "eslint:recommended",//启用elsint推荐的规则 "plugin:vue/recommended" //启用eslint-plugin-vue推荐的规则 ],
2.9 rules：
作用：检测的规则。
ESLint 附带有大量的规则，所有的规则默认都是禁用的。
在配置文件中，使用 "extends": "eslint:recommended" 来启用推荐的规则，报告一些常见的问题，
在Eslint中文文档中这些推荐的规则都带有一个标记。
要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
- "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
使用数组连同错误级别和任何你想使用的选项
配置定义在插件中的一个规则的时候，你必须使用 插件名/规则ID 的形式。
{ "plugins": [ "plugin1" ], "rules": { "eqeqeq": "off", "curly": "error", "quotes": ["error", "double"], "plugin1/rule1": "error" } }
规则 plugin1/rule1 表示来自插件 plugin1 的 rule1 规则。
rules 属性可以做下面的任何事情以扩展（或覆盖）规则：
- 启用额外的规则
- 改变继承的规则级别而不改变它的选项：
- 基础配置："eqeqeq": ["error", "allow-null"]
- 派生的配置："eqeqeq": "warn"
- 最后生成的配置："eqeqeq": ["warn", "allow-null"]
- 覆盖基础配置中的规则的选项
- 基础配置："quotes": ["error", "single", "avoid-escape"]
- 派生的配置："quotes": ["error", "single"]
- 最后生成的配置："quotes": ["error", "single"]
如：
module.exports = { //值为 "eslint:recommended" 的 extends 属性启用一系列核心 规则，这些规则报告一些常见问题，在 规则页面 中被标记为打勾。 "extends": "eslint:recommended", "rules": { // enable additional rules "indent": ["error", 4], "linebreak-style": ["error", "unix"], "quotes": ["error", "double"], "semi": ["error", "always"], // override default options for rules from base configurations "comma-dangle": ["error", "always"], "no-cond-assign": ["error", "always"], // disable rules from base configurations "no-console": "off", } }
三.使用eslint-plugin-vue插件规则:
3.1. eslint-plugin-vue：
Vue.js官方eslint插件，检查.vue文件中的<template> and <script>,查找语法，vue指令，vue风格指南错误。
3.2.用法：
Example .eslintrc.js:
module.exports = { extends: [ // 在这里添加通用的规则, 例如: 'eslint:recommended', 'plugin:vue/recommended'//extends里面有这选项相当于多设置了，"parser": "vue-eslint-parser" ], rules: { // 在这里覆盖/添加 rules, 例如: // 'vue/no-unused-vars': 'error' } }
3.3.parser问题：
如果使用其他通用parsers，如babel-eslint，需要把他写在parserOptions.parser里面而不是parser选项里
因为eslint-plugin-vue需要vue-eslint-parser解析器.vue文件。重写parser选项会导致eslint-plugin-vue不能使用。
- "parser": "babel-eslint", + "parser": "vue-eslint-parser", //extends里面有'plugin:vue/recommended'相当于多设置了"parser": "vue-eslint-parser"。 "parserOptions": { + "parser": "babel-eslint", "sourceType": "module" }
3.4.plugin:vue/xxx的取值：
- base
- essential
- strongly-recommended
- recommended
取值对应启用的规则，访问eslint-plugin-vue官网。
四. .eslintrc.js实例及集成到VSCODE自动修复
4.1.启用eslint推荐规则和eslint-plugin-vue规则示例：
module.exports = { "root": true, "env": { "browser": true, "node": true, "es6": true, }, "parserOptions": { "parser": "babel-eslint", "sourceType": "module" } "extends": [ 'eslint:recommended', 'plugin:vue/recommended' ], "rules": { // 在这里覆盖/添加 rules, 例如: 'vue/no-unused-vars': 'error' } }
4.2.集成到VSCODE
需在VSCODE拓展中安装Eslint插件，在VSCODE设置->settings.json
{ "prettier.semi": false,//设置语句结尾不加分号 "prettier.singleQuote": true,//设置单引号 "eslint.autoFixOnSave": true,//设置eslint自动处理可修复的规则 "eslint.validate": [ "javascript", "javascriptreact", {"language": "vue","autoFix": true}//处理可修复的vue检测规则 ], "vetur.validation.template": false,//使用Vetur插件要关闭这项 }
