一、Eslint 是什么
编码规范
每个程序员都有自己的编码习惯，最常见的莫过于：
- 有的人写代码一行代码结尾必须加分号
;，有的人觉得不加分号;更好看； - 有的人写代码一行代码不会超过 80 个字符，认为这样看起来简洁明了，有的人喜欢把所有逻辑都写在一行代码上，觉得别人看不懂的代码很牛逼；
- 有的人使用变量必然会先定义
var a = 10;，而粗心的人写变量可能没有定义过就直接使用b = 10;；
Lint 的含义
如果你写自己的项目怎么折腾都没关系，但是在公司中老板希望每个人写出的代码都要符合一个统一的规则，这样别人看源码就能够看得懂，因为源码是符合统一的编码规范制定的。
那么问题来了，总不能每个人写的代码老板都要一行行代码去检查吧，这是一件很蠢的事情。凡是重复性的工作，都应该被制作成工具来节约成本。这个工具应该做两件事情：
- 提供编码规范；
- 提供自动检验代码的程序，并打印检验结果：告诉你哪一个文件哪一行代码不符合哪一条编码规范，方便你去修改代码。
Lint 因此而诞生。
Eslint 的含义
Lint 是检验代码格式工具的一个统称，具体的工具有 Jslint 、 Eslint 等等 ...........
二、使用 Eslint
确保你的电脑安装了 node 和 npm 环境
创建项目
npm init 指令会在项目根目录下生成 package.json 文件。
**
$ d:
$ cd d:
$ mkdir test-eslint
$ cd test-eslint
$ npm init
安装依赖包
--save-dev 会把 eslint 安装到 package.json 文件中的 devDependencies 属性中，意思是只是开发阶段用到这个包，上线时就不需要这个包了。
**
$ npm install eslint --save-dev
设置 package.json 文件
打开 package.json 文件，修改 script 属性如下：
**
"scripts": {
"test": "react-scripts test --env=jsdom",
"lint": "eslint src",
"lint:create": "eslint --init"
}
- script 属性的意思是脚本，使用方法是在 cmd 窗口中输入
npm run 指令的形式，如：npm run lint:create； "lint:create": "eslint --init"这个脚本是为了生成 .eslintrc.js 文件，在介绍 Lint 的时候说到 Lint 应该提供编码规范，规范写在哪里，就写在这个文件，所以我们需要创建它；"lint": "eslint src"在介绍 Lint 的时候也说到 Lint 应该提供自动校验代码的程序，这个脚本是让 Lint 自动检验 src 目录下所有的 .js 文件。
创建 .eslint.js 文件
$ npm run lint:create
> 20170811@0.1.0 lint:create D:\code\test\20170811
> eslint --init
? How would you like to configure ESLint? Answer questions about your style // 以问答的形式创建配置文件
? Are you using ECMAScript 6 features? Yes // 是否校验 Es6 语法
? Are you using ES6 modules? Yes // 是否校验 Es6 模块语法
? Where will your code run? Browser // 代码运行环境，Browser 指浏览器
? Do you use CommonJS? Yes // 是否校验 CommonJs 语法
? Do you use JSX? Yes // 是否校验 JSX 语法
? Do you use React? Yes // 是否校验 React 语法
? What style of indentation do you use? Tabs // 首行空白选择 Tab 键还是 Space
? What quotes do you use for strings? Double // 字符串使用单引号 'string' 还是双引号 "string"
? What line endings do you use? Windows // 操作系统
? Do you require semicolons? Yes // 每行代码结尾是否校验加分号 ;
? What format do you want your config file to be in? JavaScript // 以 .js 格式生成配置文件
Installing eslint-plugin-react@latest // 因为要校验 Reac 语法，所以这里需要下载一个 React 语法规则的包
创建 index.js 文件
在根目录下创建 src/index.js 文件，内容如下，接下来就使用 Eslint 来检验这个 .js 文件是否符合编码规范。
const lint = 'eslint'
此时的目录结构应该为：
- test-eslint
+ .eslintrc.js
+ package.json
- src
+ index.js
校验代码
$ npm run lint
1:7 error 'lint' is assigned a value but never used no-unused-vars
1:14 error Strings must use doublequote quotes
1:22 error Missing semicolon semi
3 problems (3 errors, 0 warnings)
2 errors, 0 warnings potentially fixable with the `--fix` option.
这里报了三个错误，分别是：
- index.js 第1行第7个字符，报错编码规则为
no-unused-vars：变量 lint 只定义了，但是未使用； - index.js 第1行第14个字符，报错编码规则为
quotes：编码规范字符串只能使用双引号，这里却使用了单引号； - index.js 第1行第22个字符，报错编码规则为
semi：编码规范每行代码结尾必须加分号，这里没有加分号。
当我们熟悉了编码规范之后，只需进行响应的修改就可以使代码形成统一的风格。刚开始如果对编码规范具体某一条规则不了解的话，可以在 eslint规则表 查看用法。（不建议去背规则表，而是用到什么查什么，把它当成字典来用，不那么累）
设置 --fix 参数
打开 package.json 文件，修改 script 属性如下：
**
"scripts": {
"test": "react-scripts test --env=jsdom",
"lint": "eslint src --fix",
"lint:create": "eslint --init"
}
说明：这里给 "lint": "eslint src --fix", 加上 --fix 参数，是 Eslint 提供的自动修复基础错误的功能。
此时运行 npm run lint 会看到少了两条报错信息，并不是说编码规范变了，而是 Eslint 自动修复了基础错误，打开 index.js 文件，可看到字符串自动变成了双引号，并且代码末尾也加上了分号。可惜的是 --fix 只能修复基础的不影响代码逻辑的错误，像 no-unused-vars 这种错误只能手动修改。
配置文件讲解
按照上述操作，会生成默认 .eslintrc.js 配置文件，内容如下：
// .eslintrc.js
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
}
该文件导出一个对象，对象包含属性 env、extends、parserOptions、plugins、rules 五个属性，作为刚学习 Eslint 的新手，我们总是想要竭尽所能的详细了解每一个属性是什么，干嘛用的，以获取小小的安全感。
env、parserOptions、plugins
这三个放在一起将是因为你只需要知道它们是干嘛的：我的程序里要用到 ES6 、React 、JSX 语法，这几个属性就是让 Eslint 能够检验到这些语法的。其余的你不需要知道更多的哪怕一丢丢的东东了。
作者在学习之初在这块浪费了很多时间，官方文档看了很多遍，大多不能理解什么意思，后来想它既然提供这么一个自动生成配置文件的工具，并且是命令行交互的方式，我只需要告诉它我要用 ES6 、React 、JSX 语法，它会自动进行相关配置满足我的要求即可。
extends
前面一直说检验代码遵循编码规范，那到底是什么规范呢。
值为 "eslint:recommended" 的 extends 属性启用一系列核心规则，这些规则是经过前人验证的最佳实践（所谓最佳实践，就是大家伙都觉得应该遵循的编码规范），想知道最佳实践具体有哪些编码规范，可以在 eslint规则表 中查看被标记为 √ 的规则项。
如果觉得官方提供的默认规则不好用，可以自定义规则配置文件，然后发布成 Npm 包，eslint-config-airbnb 就是别人自定义的编码规范，使用 npm 安装后，在我们自己的 .eslintrc.js 中进行配置 "extends": "airbnb"，eslint-config 这个前缀可以省略不写，这样我们就使用了 eslint-config-airbnb 中的规则，而不是官方的规则 "extends":"eslint:recommended" 了。关于如何创建自定义规则配置并共享可以参考： 如何自定义规则配置
关于 "airbnb" 编码规范说两句，在接触到大多数开源项目中，大多数的作者都会使用 "airbnb" 编码规范而不是 官方的 "extends": "eslint:recommended" 编码规范。
如果我们觉得 eslint-config-airbnb 规则配置中个别规则并不符合当前项目的要求，可以直接在 .eslintrc.js 配置 rules 属性，优先级高于共享规则 airbnb。
rules
配置文件也生成了，我们怎么知道我们的系统会遵循什么规则呢？？
在前面的列子中，使用 npm run lint 校验出了三处错误，假如我们的项目中字符串就是要使用单引号而不是双引号，代码结尾就是要不加分号才好看，变量就是定义了可能不会使用，我们可以通过设置 rules 来定义我们自己的编码规范，即规则。
ESLint 附带有大量的规则，修改规则应遵循如下要求：
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
- "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
有的规则没有属性，只需控制是开启还是关闭，像这样："eqeqeq": "off"，有的规则有自己的属性，使用起来像这样："quotes": ["error", "double"]，具体有没有自带属性，可查看 eslint规则表。
修改 .eslintrc.js 文件中的 rules 属性：
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single" // 改成字符串必须由单引号括起来而不是双引号，'string'不报错，"string"报错
],
"semi": [
"error",
"never" // 改成代码结尾不再加分号，加了分号报错，不加分号不报错
],
"no-unused-vars": 0 // 0 相当于 off，表示关闭规则，相当于不再校验这条规则：变量定义了必须使用
}
此时再使用 npm run lint 进行代码校验，没有报错就说明校验通过，代码符合统一编码规范。
D:\code\test\20170811>npm run lint
> 20170811@0.1.0 lint D:\code\test\20170811
> eslint src
D:\code\test\20170811>
可能存在的疑问
刚接触 ESlint ，并不清楚有哪些规则怎么办，要去 eslint规则表 一条条记忆吗？答案是 no。
个人认为 ESlint 的配置文件并不是一次性完成的，而是在项目过程中慢慢完善的。你可以放心大胆的先进行编码，然后使用 npm run lint 校验代码的编码规范，如果这时候报错，可以在报错信息中知道是哪一条编码规范报错了，你可能并不认识它们，此时去 eslint规则表 查询相应规则的使用方法，如：no-unused-vars，从而进一步确定项目中是否需要这条编码规范，如果需要，进行局部调整即可。
$ npm run lint
1:7 error 'lint' is assigned a value but never used no-unused-vars
1:14 error Strings must use doublequote quotes
1:22 error Missing semicolon semi
3 problems (3 errors, 0 warnings)
2 errors, 0 warnings potentially fixable with the `--fix` option.
常用的几个规则
"quotes": [1, "single"], # 单引号
"quote-props":[2, "as-needed"], # 双引号自动变单引号
"semi": [2, "never"], # 一行结尾不要写分号
"comma-dangle": [1,"always-multiline"] # 对象或数组多行写法时，最后一个值加逗号
三、使用场景
1. vscode的ESLint插件，能帮助我们自动整理代码格式
VScode中保存时使用ESlint进行代码检查
1.1 启用ESLint
ESLint插件安装 与 插件的扩展设置, 选择vs code左下角的“设置”， 打开 VSCode 配置文件,添加如下配置
settings.json中添加如下配置
eslint.autoFixOnSave 用来进行保存时自动格式化，但是默认只支持js 文件。
这样每次保存的时候就可以根据根目录下 .eslintrc.js 你配置的ESLint规则来检查和做一些简单的fix
2. react、vue项目中安装eslint包，配置在.exlintrc.js中引入npm包中公司规定的eslint规则或者直接规定自已的规则，来覆盖node-modules中引入的规则。
四、参考
五、总结一
1. 【语法规则】 一般包括：
- 两个字符缩进
- 使用单引号
- 语句后不可以写分号
- 等等
2. Lint 是检验代码格式工具的一个统称
- 具体的工具有
Jslint、Eslint等
3. VSCode的ESLint插件，能帮助我们自动整理代码格式
- 直接安装eslint插件即可，每次保存，vscode就能标红不符合ESLint规则的地方，同时还会做一些简单的自我修正。
4. ESLint 是一个开源的JavaScript验证工具，相比JSLint，ESLint具有可配置性
其他跟 JSLint 的不同之处：
- ESLint 使用 Esprima 来进行 javascript 解析
- ESLint 使用 AST 来修改代码模式
- ESLint 是完全插件化的，每个规则都是一个插件，用户可以在运行时增加更多的插件
5. JavaScript 校验 对比
JavaScript 校验：JSLint、JSHint、JSCS、ESLint
-
JSLint，古老，不可配置，不可扩展，不可禁用许多特性的校验
-
JSHint，可配置的JSLint版本
-
JSCS，代码样式检查，只捕获与代码格式化相关的问题，而不是潜在的bug或错误。已经与 ESLint 合并。
-
ESLint，易于扩展，可自定义规则，可以插件形式安装更多的规则。
一个 linting 工具是解决问题的一个很好的步骤，但是它基于一定的规则发现错误，具有一定的局限性。
要采用更安全的bug自动收集，建议使用单元测试(unit tests)，代码评审(code reviews)
六、【最佳配置】 JavaScript 的推荐编码规范
业界有许多 JavaScript 的推荐编码规范，较为出名的就是下面两个：
- airbnb style
- javascript standard
同时这里也推荐 AlloyTeam 的 eslint-config-alloy。
但是代码规范这个东西，最好是团队成员之间一起来制定，确保大家都能够接受，如果实在是有人有异议，就只能少数服从多数了。虽然这节的标题叫最佳配置，但是软件行业并有没有什么方案是最佳方案，即使 javascript standard 也不是 javascript 标准的编码规范，它仅仅只是叫这个名字而已，只有适合的才是最好的。
安利一下，将 ESLint 和 Prettier 结合使用，不仅统一编码规范，也能统一代码风格。
七、 我为什么使用 JavaScript Standard Style(JavaScript 标准编码风格)
请参考 blog.csdn.net/u012207345/…
安利一下 良好的程序层次结构
程序员应该重视：
- 正确性
- 可读性
- 幸福感
- 高效率
事实证明，采用 JavaScript Standard Style(JavaScript 标准编码风格)，对以上每一条都有好处。
八、【ESlint原理】
ast 抽象语法树
JavaScript 的 linter 工具发展历史其实也不算短，ESLint 之所以能够后来者居上，主要原因还是 JSLint 和 JSHint 采用自顶向下的方式来解析代码，并且早期 JavaScript 语法万年不更新，能这种方式够以较快的速度来解析代码，找到可能存在的语法错误和不规范的代码。但是 ES6 发布之后，JavaScript 语法发生了很多的改动，比如：箭头函数、模板字符串、扩展运算符……，这些语法的发布，导致 JSLint 和 JSHint 如果不更新解析器就没法检测 ES6 的代码。而 ESLint 另辟蹊径，采用 AST 的方式对代码进行静态分析，并保留了强大的可扩展性和灵活的配置能力。这也告诉我们，在日常的编码过程中，一定要考虑到后续的扩展能力。
正是因为这个强大扩展能力，让业界的很多 JavaScript 编码规范能够在各个团队进行快速的落地，并且团队自己定制的代码规范也可以对外共享。
最后，希望你通过上面的学习已经理解了 ESLint 带来的好处，同时掌握了 ESLint 的用法，并可以为现有的项目引入 ESLint 改善项目的代码质量。
九、 使用/编写 ESLint插件
虽然官方提供了上百种的规则可供选择，但是这还不够，因为官方的规则只能检查标准的 JavaScript 语法，如果你写的是 JSX 或者 Vue 单文件组件，ESLint 的规则就开始束手无策了。
这个时候就需要安装 ESLint 的插件，来定制一些特定的规则进行检查。ESLint 的插件与扩展一样有固定的命名格式，以 eslint-plugin- 开头，使用的时候也可以省略这个头。
npm install --save-dev eslint-plugin-vue eslint-plugin-react
{
"plugins": [
"react", // eslint-plugin-react
"vue", // eslint-plugin-vue ]
}
或者是在扩展中引入插件，前面有提到 plugin: 开头的是扩展是进行插件的加载。
{
"extends": [
"plugin:react/recommended", ]
}
十、总结二
1. Vue/react项目 vscode 安装eslint插件的方法(代码自动修复)
2. npm run script对象中 执行npm lint命令时 加上自动修复 -fix参数
3. 【eslint两处安装有何区别】Vue/react项目中安装了eslint，vscode安装eslint插件？
webpack 里面的是在编译期给你报错用的，报错了会停止编译，直到你修复。 vscode中的是提示给你看的，方便你直接看到错误。顺便会帮你修复简单的错误。
准确的说应该是webpack中的eslint是加载器，全名是eslint-loader。是为了处理某些文件的加载器而已,因此
它本质是loader。 vscode是一个编辑器，vscode中的eslint本质上是一个vscode插件， 他会调用eslint，然后将eslint的报错反馈给vscode，仅此而已。 webpack和webpack-cli有什么区别？ 你可以对比理解一下
