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不同
