前端代码规则Eslint与Prettier区别与联系

常见易混淆问题
代码规范的重要性，我们这里就不多说啦，不管是从项目长期可维护性，还是从团队协作的角度来说，在实际项目开发中，引入代码规范都会非常有必要。
但是在引入代码规范的过程中，尤其新手来说，对于eslint,prettier，vscode格式化插件，以及airbnb，standard等名词很容易混淆，导致我们在项目中引入代码规范的时候，会出现不知道该配置哪些地方，或者引入之后不知道什么原因格式化无效等问题。
接下来，我们就针对这些常见易混淆的问题总结一下：

eslint与prettier有什么区别
eslint与airbnb，standard代码规范有什么区别
eslint与vscode eslint插件有什么区别
一、Eslint与Prettier的区别
ESLint 是一个 javascript 代码检测工具，它主要检测的是下面这些问题：

例如：未使用的变量
未定义的引用
比较时使用三等
禁止不必要的括号
…等
以上这些问题，都是我们需要去统一约定的，这就是Eslint所做的事情。
那Prettier呢 ？
我们都知道Prettier是一款纯粹的代码格式化工具，很显然，它的作用就是：格式化，不关心代码语法等问题。 比如常见格式化问题：

代码缩紧
单引号与双引号
…等
因此，我们可以理解Eslint和Prettier的作用都是为了让我们项目中的代码规范能够统一，只是他们的专攻的方向不一样，而在实际项目开发中，最佳实践就是将Eslint与Prettier都引入到我们的项目中。
不过要注意一点：Eslint与Prettier虽然专攻的方向不一样，但是还是有一部分重叠的规则，那如果项目中亮着都引入啦，就需要我们额外处理这些这部分冲突的规则，

由于eslint和prettier有部分规则是冲突的，但是在实际项目中，两者又都需要，那如何解决冲突的这部分问题呢？eslint因此推出了eslint-plugin-prettier 插件，也就是说把prettier做成eslint的一个插件，然后引入到eslint中，会用prettier把eslint冲突的那部分覆盖掉。但是我们整体的代码格式化使用的是eslint。

二、Eslint与airbnb，standard代码规范的区别
我们可以把Eslint理解为一个单纯的代码检测工具，那具体检测的标准是什么呢？那就需要定义一系列的规则，比如：单引号双引号问题，我们可以定义一条规则，因此，Eslint默认集成了一套自己的规则列表。
而airbnb，standard代码规范又是什么呢？其实就是各个公司把自己常使用的一些规则列表开源了出来，从而我们在自己的项目中，就可以直接引入这些开源的规则列表，就没必要我们自己去定义规则啦。
常见开源的规则标准有：

eslint-config-airbnb
eslint-config-standard
eslint-config-google
当然，国内的大公司其实也开源了自己的代码规范，比如：腾讯的 eslint-config-tencent等。

三、eslint与vscode eslint插件有什么区别
我们常说的Eslint，其实就是一个npm包，我们可以在项目中像安装其他依赖包一样，直接安装eslint这个包，并且使用他内置的一些命令，我们也可以修改其对应的配置文件等。
npm init
npm i eslint –save-dev
npx eslint –init // 初始化eslint配置文件
npx eslint lint // 检测
npx eslint lint –fix // 检测并修复

也就是说，安装完之后，我们就可以手动去执行npx eslint lint命令去对我们的代码进行检测是否符合规范的，同时还可以使用–fix参数去手动修复。
但是试想一下，我们在实际代码开发的过程中，每写几行代码，就得手动执行一下这个命令，那得多麻烦呀，很显然，这不是我们的最佳实践。那到底如何做呢？
答案就是：在编辑器中引入eslint插件
这里以vscode为例，如下图所示，安装eslint插件：

安装完成以后，打开我们自己的项目中，我们就可以右击使用vscode的格式化功能去直接对我们的项目中代码进行格式化啦。要注意的一点：当vscode安装eslint插件以后，就会自动优先以我们项目中引入的eslint规则去进行格式化，这样可以保证如果我们切换到其他项目，使用了不同的规则，vscode格式化的时候，依然是以当前项目的规则为准。当然前提是我们项目需要引入eslint。
除此之外，还可以进一步优化，每次都得右击才能进行格式化是不是也很麻烦，是的，这时我们也可以修改vscode eslint插件的配置，从而实现每次我们保存代码的时候，就可以自动格式化。
具体配置如下：
因此，在实际项目开发中，如果我们想要去在vscode 等编辑器中使用eslint格式化功能，就需要保证上图中的2，3选项为true.