【工程化实践】你为什么需要ESLint，Prettier&EditorConfig | 8月更文挑战前言读完本文，你将

前言

你是否对下面几个问题感到好奇？

我们为什么需要EditorConfig，ESLint以及Prettier？
EditorConfig，ESLint以及Prettier有什么区别？以及为什么我们需要同时使用ESLint，Prettier以及EditorConfig ?
同时使用ESLint，Prettier时，在哪些清况下会产生冲突
同时使用ESLint，Prettier的情况下，如何避免这些冲突？

本文将告诉你答案~

我们为什么需要ESLint，Prettier以及EditorConfig？

我们为什么需要EditorConfig

EditorConfig的作用

在多人协作的项目中，不同的开发者使用不同的编辑器和IDE，也有着不同的编码风格。比如，有的人喜欢用2格缩进，有的人喜欢用4格缩进。有的人通过dos换行符进行换行，有的人又使用unix换行符进行换行。所以，为了统一大家的编码风格，以便于协作，便有了EditorConfig。

EditorConfig的使用

首先：我们需要在项目中统一配置.editorconfig的文件
其次：虽然EditorConfig可以跨编辑器和IDE进行工作，但是不同的编辑器对EditorConfig的支持并不同。有的需要安装插件，editorconfig才能正常工作。有的则直接支持editorconfig，开发者不要做其他任何操作。所以要想让editorconfig在不同开发者的编辑器或者IDE中工作，我们需要了解项目中的开发者都使用了什么样的编辑器或者IDE。

无需插件的编辑器和IDE 需要配置插件的编辑器和IDE

在VSCode中使用EditorConfig

首先，我们在项目中创建一个editorconfig文件，配置如下：

// .editorconfig
root = true

[*]
end_of_line = lf
insert_final_new_line  = true
 charset = utf-8
 // 用来控制代码缩进
 indent_style = space
 indent_size = 2

然后，如果你的vscode没有安装EditorConfig插件，则我们需要安装该插件，如下所示现在，我们打开编辑器，开始编写代码，动图如下：

我们可以看到，在编写代码的过程中，换行的时候编辑器自动缩进了2个空格。现在我们将更改一下editorconfig的配置

indent_size = 10

我现在设置的缩进为10格空格缩进，现在我们打开vscode，再写一遍刚刚的代码，如下所示：同样的，我们可以看到，在换行的时候编辑器自动缩进了10个空格。所以，我们可以知道，EditorConfig是在我们编写代码的过程中来进行代码的格式化工作。

我们为什么需要ESLint

ESLint的作用

和editorconfig一样，通过使用eslint，同样可以统一大家的编码风格。但是，除此之外，eslint另外一个重要的功能在于它可以自动检测出一些我们在代码中出现的某些低级错误。比如，发生像下面这些错误，我们在代码已经开始运行的时候才发现这个错误。但是如果我们使用eslint，则可以在我们的代码运行之前发现，以此来提高我们的编码效率

这些错误大致可以分为6类

SyntaxError
Reference Error
Range Error
TypeError
EvalError
URIError

下面，我们通过使用eslint来实际感受一下它是如何工作的。

ESLint的使用

eslint和editorconfig类似：首先，我们在项目中创建一个.eslintconfig配置文件

// .eslintrc
{
  "extends": ["eslint:recommended"],
  "env": {
    "es6": true,
    "node": true
  },
  "rules": {
    "max-len": ["error", { "code": 80 }],
    "indent": ["error", 2]
  }
}

在VSCode中使用ESLint

同样的，eslint和editorconfig一样也可以在大多数的编辑器中工作。和editorconfig一样，在vscode中使用ESLint需要安装ESLint插件，如图所示：现在，我们即在项目中配置了eslintrc文件，也在vscode中安装了eslint插件。接下来我们在编辑器中，编写如下代码，如图所示如上所示代码的问题在于，一行中的的代码长度过长，超出了我们所配置的 "max-len": ["error", { "code": 80 }]，所以出现报错。这一类问题属于代码风格上的问题。接下来，我们来看看eslint是如何检测代码中的低级错误的。

如图所示的代码其实有两个语法错误一个是a常量的重复声明，另一个是name属性值后面没有添加逗号。在vscode中我们可以发现，在我们编写并保存完该代码的过程中，只报了其中一个错误，而没有报另外一个错误，但这并不是因为eslint没有检测到后面的错误。现在，我们修改了前面的第一个错误，便可以看到后面这个报错。

所以，总的来说eslint主要用来检测两类错误

一类是风格问题可以通过Formatting rules进行配置
另一类是代码质量问题可以通过Code-quality rules进行配置

常见的规则如下所示：

// formatting rules
max-len
no-mixed-spaces-and-tabs
keyword-spacing
comma-style
indent

...

// code-quality rules
no-unused-vars
no-extra-bind
no-implicit-globals
prefer-promise-reject-errors
....

通过命令行使用ESLint

当然，除了通过vscode的eslint插件来在我们编码的过程中去检测我们代码中可能出现的问题，我们还可以通过运行命令行来实现对编写完成的代码进行检测

安装eslint

npm install eslint

在package.json文件中配置eslint

检查代码错误

npm run lint

修复代码问题

npm run lint --fix

我们为什么需要Prettier

Prettier的作用

首先，prettier只关注代码风格问题，它可以自动快速的去修复代码中的风格问题，让开发者关注真正重要的问题。但是eslint也可以用来修复代码的一些风格问题。那么为什么我们还需要prettier呢？答案如下：下面，我们分别使用prettier和eslint来进行代码的格式化，来实际感受一下prettier的力量吧！

Prettier vs ESlint

在开始使用Prettier之前，我们先来看看eslint在自动化格式代码这方面是如何工作的~

使用eslint自动格式化代码

eslint除了可以自动检测代码之外，它也可以用来自动修复一些代码风格问题。首先，我们打开vscode的配置文件做如下配置，如图所示。然后，我们同样保持如上editorconfig的配置，依然配置为缩进10个空格。接下来，编写如图所示的代码，同样的，换行的时候编辑器会自动缩进10个空格。现在，我们编写如下代码：

注意：此时我们保持的文件为编辑状态。

现在，执行保存文件操作，我可以看到保存后的代码，自动将空格缩进距离调整成了2个，如图所示

接下来，我们继续在编辑器中编写如下所示的代码我们可以看到这段代码的一行的长度超出我们的对一行代码最大长度的要求。所以，我们希望eslint能自动格式化对这段代码进行换行操作，以达到要求。但是保存文件后，我们会发现，代码也没有发生任何变化。

使用Prettier自动格式化代码

在VScode中使用Prettier

在vscdoe中使用Prettier，也需要安装图Prettier插件，如下所示接着，我们打开vscode的settings.json配置文件，进行如下配置现在，也是上面那段代码，而文档也正处于编辑状态接下来，我们对该文件执行ctrl+s保存操作，如下所示

至于自动缩进为符合要求的格式，prettier也是同样支持的，大家可以自行实验。

通过命令行使用Prettier

当然，除了通过vscode的prettier插件来在我们保存代码时进行代码的格式化，和eslint一样，我们也可以通过命令行来实现

安装prettier

npm install prettier --save-dev

运行prettier

npx prettier --write .

我们为什么需要同时使用ESLint，Prettier以及EditorConfig？

经过上面的一系列小实验，我们可以知道

prettier只专注于格式化代码的工作，且它的格式化代码的能力比eslint更强，更全面
eslint的虽然既可以检测代码中出现的问题，也可以用来修复一些代码风格问题，但是eslint最重要的还是它的检测功能
editorconfig的主要功能也是用来格式化代码的，但是上面的实践我们可以知道editorconfig的是在我们编写代码的过程中，就已经开始工作了，而prettier和eslint的格式化代码功能，则是在我们保存代码后触发。

我们可以知道同时使用EditorConfig，Prettier以及ESLint可以有效的提高我们的编码效率以及代码质量。最后，我们的策略是使用EditorConfig + Prettier对代码进行格式化工作，使用ESLint来检测我们代码中的问题。

同时使用ESLint，Prettier时，在哪些情况下会产生冲突？以及如何解决这些冲突？

冲突

eslint和prettier产生的冲突的主要原因是相关的rule formatter的不一致导致的问题。比如，当项目中的.prettierrc文件和.eslintrc文件都针对了是否添加分号这一规则进行配置，在.eslintrc中的配置是不能添加分号，而在.prettierrc文件中的此配置是可以添加分号。如下所示

现在，我们在编辑器中编写如下代码，此时文件处于编辑状态

现在，我们保存该代码，该代码的末尾会自动添加上分号，如下所示

这是因为，保存文件时，ESLint先fix了代码，之后prettier格式化了代码，导致代码变得不符合ESLint的规则了。

解决方案

首先就是让专业的人做专业的事，也就是说让eslint只负责代码检测的功能，而格式化代码的任务则都由prettier负责。这样做了之后，eslint的formmater rule依然可能会和prettier的规则产生冲突，解决这个问题的思路有两种

第一种思路是：保证prettier格式化代码的formmatter规则和eslint的检测相关的formmater规则一致
第二种思路是：关掉eslint所有的相关的风格检测规则，也就说eslint只用去检测代码中可能出现的低级错误，而不用去检测关于代码风格的问题。

下面，我们来实战

第一步：关掉eslint在vscode中的格式化代码功能

第二步：

方法一：同步prettier和eslint的formmater rule规则

修改eslint的相关formmater rules，如图所示。这样做虽然可以解决问题，但是

第一：需要我们手动同步eslint的formmater rules和prettier的规则，很麻烦
第二：可能会存在这样的情况，eslint里面有些风格规则，prettier并不支持。如果在你的eslint配置里存在这样的规则，那么冲突问题依然存在。

方法二：关掉eslint的formmater rule规则

这种方式就是强制关掉eslint的所有相关的formmater rule，让eslint只专注于检测和code quantity相关的问题。像下面这样我们可以通过安装eslint-config-prettier来实现这一点

npm install eslint-config-prettier --save-dev

现在，我们进行如下配置

这样做，eslint-config-prettier里的配置便可以覆盖并关闭掉eslint:recommended里所以相关的formmater rules。同时我们也需要关掉我们自定义rules字段里配置的formmater rules(上图注释掉的代码)，对于上面这个小例子来说，删掉这段代码即可。

最后

如果你使用命令行的方式去检测以及修复代码中的问题。根据上面的策略，你每次都需要同时运行两个命令，一个lint命令，一个format命令。为了能够一键检测修复代码中的问题，我们可以在eslint中集成prettier。实现这一点，只需要安装eslint-plugin-prettier插件即可。

安装插件

npm install eslint-plugin-prettier --save-dev

配置插件

{
  "extends": ["eslint:recommended", "prettier"],
  "env": {
    "es6": true,
    "node": true
  },
  "rules": {
    "prettier/prettier": "error"
  },
  "plugins": [
    "prettier"
  ]
}

一键运行

npx eslint main.js

【工程化实践】你为什么需要ESLint，Prettier&EditorConfig | 8月更文挑战

前言