editorconfig、eslint、prettier三者的区别、介绍及使用

每次搭建新项目都少不了这些工具，但时间一久就忘记了，下次搭新项目时又要四处查官方文档，因此特此记录，主要内容是对这三个工具的理解，以及具体使用方式

editorconfig

理解

先看官网的定义：

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.

EditorConfig 帮助使用不同IDE开发同一个项目的开发者，维持固定统一的代码风格。

简而言之，EditorConfig就是为了抹平不同IDE的代码格式差异的

使用

安装插件

某些编辑器已经内置了EditorConfig插件，无需另外安装了，比如 WebStorm、VisualStudio、pyCharm等等

某些编辑器没有内置，需要自行安装插件，比如vscode，需要安装 EditorConfig for VS Code

添加配置文件

定义格式规则，避免常见的代码格式不一致和丑陋的 diffs

通常在项目根目录下，添加.editorconfig配置文件，贴一份常见的配置

# http://editorconfig.org

root = true

# 说明

## 设置文件编码为 UTF-8；

## 用两个空格代替制表符；

## 在保存时删除尾部的空白字符；

## 在文件结尾添加一个空白行；

[*]

indent_style = space

indent_size = 2

end_of_line = lf

charset = utf-8

trim_trailing_whitespace = true

insert_final_newline = true

[*.md]

trim_trailing_whitespace = false

[Makefile]

indent_style = tab

ESLint

理解

eslint的关注点是代码质量和代码格式。

何为代码质量？如未使用变量、三等号、全局变量声明等问题

何为代码格式？如单行代码太长、tab的长度、空格、逗号，单双引号等问题

对于质量和格式问题，eslint可以给出错误或警告提示，也可以自动修复，autofix

使用

eslint的原则是一切皆可配，没有什么必须要禁止，或必须要使用的规则，如果有，这些规则应该从语言本身就限制掉

灵活是有代价的，虽然每个规则都可配，但要配置那么多规则也是及其繁琐的，因此有人提供了一些preset，也就是预设规则，通常由一些最佳实践集成而来

生成配置文件

使用官网的CLI，按自己的项目的需求生成。在项目根目录执行以下命令：

npx eslint --init

回答几个问题后，比如配置文件格式、是否使用react,vue，是否支持typescript等，则会自动在根目录下生成对应的配置文件

下载插件

以vscode为例，下载ESLint插件，插件会根据项目根目录下的配置文件，校验代码格式

如果自动修复 autoFix 功能，需进一步配置插件：

左下角打开配置（Setting），以json格式展示
给setting.json添加如下配置项：

"editor.formatOnSave": true,

"editor.codeActionsOnSave": {

    "source.fixAll": true

}

这样，对于可自动修复的格式错误，在保存文件时，eslint会自动帮我们修复

此外，如果项目对格式强制要求，还可加载husky和lint-staged在commit前对更改的代码做lint校验（前者用来给git流程添加钩子，后者用来给只更改的代码而不是整个项目做lint），lint不通过则不予commit

（题外话：个人不太建议这种方式，每次commit都要多等几秒，太慢了，还是尽量靠自觉）

Prettier

Prettier只关注代码格式。在之前很流行，尤其是在eslint还不支持autoFix时。

它即可单独使用，也可以配合编辑器使用，或和eslint一起使用。

这里有人可能会有疑问，eslint不也关注代码格式，做格式校验吗？为啥还要用Prettier？这是因为一是在之前eslint不支持autoFix, 二是两个的规则并不完全相同

其实，笔者也甚是不喜这么多的配置文件，因此最近的项目便不加再Prettier了，只用eslint做代码质量和格式的校验，加上autoFix，基本够用了。

所以这里不再细说Prettier的使用了，有需要请移步 Prettier官网

总结

EditorConfig 是用来抹平编辑器差异的，比如文件编码，锁进格式等
ESLint 关注于代码质量校验和代码格式校验，配合插件支持autoFix和错误提示，完全可插拔
Prettier Prettier只关注代码格式，也支持自动修复，规则和ESLint不同