前端代码规则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.

总结

在实际项目开发中，很可能出现一些格式化无效等各种问题，遇到这些问题，我们可以从以下几方面去思考：

1. 首先要保证我们的项目中引入eslint与prettier，并且有eslint配置文件，确认以后，我们可以通过执行eslint lint与eslint lint --fix命令去检测是否生效，如果正常运行，并且提示我们哪个文件，哪一行代码格式有问题，就说我们项目中的配置基本是没有问题啦。
2. 接下来就是要保证vscode eslint插件是否安装，并且要检测其settings.json是否开启了eslint校验，以及保存时自动格式化等配置。

转载文档：https://juejin.cn/post/7053365694619975711