1. 两大 linter 说起
- eslint 为 js 而设计的可插拔的检查程序
- tslint 为 ts 语言而设计的可扩展的检查工具（将在 2019 年取消更新，建议使用 eslint）
两种 linter 都可以实现 fix 功能，所谓 fix 就是将原代码转化为符合一定规则的新代码。虽然 linter 工具 fix 之后的代码，解决了大部分问题，但可能有些地方并不符合我们的阅读代码的习惯，比如一行代码过长。
在强迫症的影响下，不同的人对自己的代码进行不同程度的”美化“，甚至遇到他人代码时也会顺手美化一把。
最终导致项目中的代码风格不能统一。
2.prettier 简介
prettier 是一种保证代码一致性、兼具美化效果的代码格式化工具
2.1 not only js
前有 jslint，而后由于 eslint 过于成功，导致了 jslint 已经无人问津，这也让我们误以为 eslint 只专注于 js
下面列举了它所支持的其他语言
- javascript、jsx
- flow、typescript
- json
- css、less、scss
- graphql
- markdown
- yaml
2.2 IDE
有人的地方就有江湖，有编辑器的地方就有 prettier，目前流行的 ide 都能支持 prettier
- vscode
- webstorm
- atom
- visual studio
- sublime
以上列举了前端比较常用的几个工具，需要确定所使用的的编辑器是否支持 prettier 是否支持，请移步官网
2.3 parser
prettier 针对不同的语言，所使用的的 parser 有多个，例如编译 graphql 时所使用的就是 graphql/language。
而编译 js 的目前有两个，即 babylon（默认）、flow，由于 babylon 的 bug 较少，对编译工作支持度较好，所以默认情况下选用 babylon 即可。
babylon 即 babel6 的编译工具，在 babel7 中已更名为 @babel/parser
3.eslint 融合
eslint 作为强大的 linter 工具，与 vscode 配合后能降低代码问题的风险，在 coding 的过程中就发现潜在问题，提高代码质量。
3.1 eslint-config-prettier
eslint 的 config 可以继承自第三方包的 config，config 中定义了 rules 的开关规则，eslint-config-prettier 主要定义了 prettier 格式化后导致 eslint 报错的那些规则
3.2 eslint-plugin-prettier
eslint 与 prettier 的格式化需要分别进行，如果想要让 eslint fix 的同时，也能兼顾 prettier 的规则进行格式化，就需要使用到 eslint-plugin-prettier 这个插件。
它的主要作用就是专门定义了 eslint fix 的 prettier 规则
3.3 融合写法
在.eslintrc 文件中加入以下配置
{"extends": ["plugin:prettier/recommended"]
}这段代码有三个作用
- 继承 prettier 的 config 规则
- 开启 rules 的 “prettier/prettier”: “error”
- eslint fix 的同时执行 prettier 格式化