ESLint
ESLint 是一个开源的 Javascript 代码检测工具，通过将 js 代码解析成抽象语法树（AST），分析并给与代码质量（如一些方法的使用方式不对）和代码风格(缩进，引号等等）两方面的提示。这样就可以在编码过程中发现问题，而不是在代码的执行过程中。
-
ESLint与vscode-ESLint插件的区别
ESLint 是一个 npm 包，安装之后，我们可以通过相应的命令来分细或是修复不规范代码
vscode-ESLint 是 vscode 插件，会在写代码的过程中直接标注格式错误
- 安装：
yarn add eslint -D - 创建一个 eslint 配置文件：
.eslintrc(json 形式) 或者.eslintrc.js（个人觉得后者更灵活）
// .eslintrc.js
module.exports = {
// rules: 代码规则
rules: {
semi: 'error' // 行尾必须有分号
}
}
- 创建一个
test.js
js var a = 123
- 检测一下
npx eslint test.js
$ npx eslint test.js 1:12 error Missing semicolon semi // 少了个分号
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the --fix option.
eslint 分析出代码有问题, 那么如何修复呢，对于本例，我们当然可以直接加上分号，但是对于动辄几百上千行的代码，显然十分麻烦，eslint 提供了的一件修复的命令
- 修复：
npx eslint test.js --fix
var a = 123; // 分号自动加上了
那文件多的时候不还是得一个个文件操作，方法总比困难多，后面讲到。
每次都需要手动敲命令检测和修复显然是不显示的，所以各个编辑器都有对应的插件来将 eslint 集成到编辑器。以 vscode 为例 安装: 应用商店搜索安装 eslint 安装完我们会发现代码出现报错了:
不用命令去检测了，直接会报错，接下来的问题是怎么一键修复了。
我们知道，vscode 自带代码格式化 js 的功能，另外也可以安装格式化的插件，其中以 prettier 和 beautify 最常见。
安装 prettier 后，执行 shift + alt + f 格式化之前的代码，但是会发现并没有什么变化，因为 preitter 也要配置规则
再格式化一下，就得到了分号。
那么问题来了假如说这个人根据习惯，在编辑器上设置行尾不要分号，但是做的某个项目中的.eslintrc.js 配置的规范是要分号，那该怎么办呢。临时改编辑器配置行是行，如果要同时进行多个项目开发，但是大家的规则不一样呢，这个时候，我们可以配置局部方案：
新建一个 prettier.config.js （同样也支持 json 形式），在里面写入
module.exports = {
semi: true // 行尾添加分号
}
再去格式化，发现即使把编辑器的规则设定为不需要分号，也会加上。所以这样在项目中有的配置，就不会用编辑器的，也就不会被项目外部所影响。
prettier.config.js解决了格式化配置冲突的问题
但是我们还要再看一种情况：
-
.eslintrc.js配置rules.semi: never // 不要分号 -
prettier.config.js配置semi: true // 需要分好
再执行格式化，结果是分号加上了，但是代码上提示错误
此时格式化的规则与 eslint 校验规则冲突了，这种情况肯定是不好的，最好是能够让他们能够”协同“，共用一套规则。
那么最好是让 eslint 能直接使用 prettier 的规则，不巧真的可以：
-
yarn add -D prettier eslint-plugin-prettier eslint-config-prettier停一下，我们先来看看这几个插件 - prettier （npm） prettier 是格式化的 npm 包，与 vscode-prettier 插件的区别类似于 eslint 与 vscode-eslint 插件的区别。prettier 包含一些命令，我们可以使用它们去检测和格式化代码：
如 npx prettier --write . 可以进行全局代码格式化，而 vscode-prettier 是我们在编辑器层面可以用来进行检测和格式化的工具
eslint-plugin-prettier
它是将 eslint 与 prettier 集成的工具，通过它我们就可以实现，eslint 用 prettier 的规则来检测代码，现在，我们需要改一下 eslint 配置：
js // .eslintrc.js module.exports = { + plugins: ["prettier"], // 引入`eslint-plugin-prettier`插件 rules: { - semi: true, + "prettier/prettier": "error" // 使用 prettier 规则 }, };
然后我们就只需要在.prettierrc.js 中配置规则就可以了：
js // .prettierrc.js module.exports = { semi: true, endOfLine: 'auto' }
现在执行下格式化操作：npx prettier --write . or shift + alt + f
没有分号，eslint 会提示错误，执行格式化后，eslint 错误消失，两者公用一个规则，问题解决
然而 eslint 中本身是可以配置规则的呀，那么，假如出现这种情况，不是打架了么：
```js // .eslintrc.js module.exports = { plugins: ['prettier'], rules: { 'prettier/prettier': 'error', semi: false // 不要分号 } }
// .prettierrc.js module.exports = { semi: true, // 要分号 endOfLine: 'auto' } ```我们来格式化一下
没错，eslint 跟 prettier 说：不是想要的，你做的再多也没用 ！
那么，eslint-config-prettier 要上场了
eslint-config-prettier
这个插件就是关闭与 prettier 不一样规则的，当然它也会关掉所有不必要的规则（比如一些已经过时的规则）
js module.exports = { plugins: ["prettier"], + extends: ["prettier"], // 使用 eslint-config-prettier 拓展 rules: { "prettier/prettier": "error", semi: false } };运行下：npx eslint --print-config path/to/main.js | npx eslint-config-prettier-check
$ npx eslint --print-config test.js | npx eslint-config-prettier-check
The following rules are unnecessary or might conflict with Prettier:
·semi
提示 eslint 的 semi 规则与 prettier 相冲，手动解决
那么至此 eslint+prettier+vscode-prettier 的简单搭配就完成了，配上完整代码：
// .eslintrc.js
module.exports = {
plugins: ['prettier'], // 使用 plugin 插件
extends: ['prettier'], // 使用 eslint-config-prettier 解决与 prettier 冲突的配置
rules: {
'prettier/prettier': 'error' // 使用 prettier 插件提供的规则校验
}
}
// .prettierrc.js
module.exports = {
// 配置规范
semi: false,
endOfLine: 'auto'
}