使用ESLint前：
eslint是干嘛的，我这样写有什么问题，怎么还报错了，太麻烦想去掉这个插件，脚手架中关于eslint文件里的配置是什么意思？
怎么设置配置项和规则达到自己想要的检测效果呢？怎么集成到VSCODE实现自动修复呢？

所以本片博文介绍ESLint是什么，配置项的意思，启用elsint推荐的规则及eslint-plugin-vue推荐规则检测项目,集成到VScode修复可自动修复的选项。
希望这篇文章可以让你看得懂elsint文件里的配置项及开启/关闭规范规则保持代码规范。

一.ESLint是什么：

• ESLint 是在 ECMAScript/java script 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。
• ESLint 可以让程序员在编码的过程中发现问题而不是在执行的过程中。
• ESLint 的初衷是为了让程序员可以创建自己的检测规则，所以的所有规则都被设计成可插入的。每条规则各自独立，可以开启或关闭，配置项实现细粒度的控制。

 二.配置项：

1.配置方式：
1.1.java script注释:

作用：临时禁止某些lint 规则出现的警告。

使用 java script 注释把配置信息直接嵌入到一个代码源文件中

/* 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 支持几种格式的配置文件：

• java script - 使用 .eslintrc.js 然后输出一个配置对象。
• YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
• JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 java script 风格的注释。
• (弃用) - 使用 .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配置项:

作用：指定解析java script的解析器。

ESLint 默认使用Espree作为其解析器，解析java script。

{
  "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