背景
对前端代码进行格式化时大多数同学都用到过prettier，例如在vscode中安装prettier插件，即可格式化任意文件，或者只格式化文件的选中部分。
prettier起到的作用是按照统一风格去美化代码。
在工程量比较大的项目中，需要加入eslint来检测代码质量，保证代码提交前发现一些低级错误，或者将不符合规范的代码进行标红，引起注意及时修改。
eslint作用是按照一定规则，检测代码质量
prettier与eslint本身是两种不同用途的工具。如果先用prettier对代码格式化，会发现编辑器中的eslint会提示报错信息，之后需要执行eslint --fix或者手动修改，其根本原因是两种工具无法关联。
1 prettier介绍
prettier是一种保证代码一致性、兼具美化效果的代码格式化工具
1.1 prettier支持的文件格式
- javascript、jsx、ts、tsx
- flow
- json
- css、less、scss
- graphql
- markdown
- yaml
以上文件格式基本涵盖了前端的工作范畴，prettier与我们的工作密切相关
1.2 parser
prettier之所以有支持多种文件格式的能力，是因为针对每种格式文件开发了对应的编译工具。例如编译graphql所使用的parser是graphql/language。
目前编译js的有两个，babylon（默认）和flow，由于babylon的bug较少，对编译工作支持度较好，官方默认选用babylon。
1.3 IDE
有人的地方就有江湖，有编辑器的地方就有prettier，目前流行的IDE都支持prettier
- vscode
- webstorm
- atom
- visual studio
- sublime
1.4 prettier存在的必要性
eslint --fix本身可以修复部分代码格式缺陷，但以下几种情况，eslint就无能为力
function pretty({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,...}){
...
}const pretty = [{greeting = "hello", greeted = '"World"', silent = false, onMouseOver},...]痛点：代码超过了一定长度，eslint会标识错误信息，但无法自动修复
要想格式化以上代码，只需要使用vscode安装的prettier插件或者执行命令
npx prettier --write src/*.js格式化之后的代码如下
function HelloWorld({
greeting = "hello",
greeted = '"World"',
silent = false,
onMouseOver
...
}) {
...
}const pretty = [
{
greeting = "hello",
greeted = '"World"',
silent = false,
onMouseOver
},
...
]你也可以通过回车将代码一步步美化，这样做的缺点有，第一会浪费大量时间，第二每个人的风格迥异将导致代码冲突
优点：使用prettier格式化风格得到统一，减少了合并代码冲突的概率
1.5 问题
我们在使用prettier对代码进行格式化之后，紧接着需要执行eslint fix修复prettier带来的不兼容地方，有没有一个好的方法可以让以上步骤合二为一
2.工程化
2.1 eslint on save
上文中多次提到了eslint --fix命令，每次执行浪费大量时间，以vscode为例，在项目的根目录中加入以下配置，就可保存时自动进行fix
.vscode/settings.json
"eslint.autoFixOnSave": true2.2 eslint validate
react代码有四种格式的文件后缀，js、jsx、ts、tsx，在默认情况下vscode的eslint插件只能给js、jsx文件的错误标红，ts、tsx文件不会自动提示错误信息，但即使肉眼看不见这些错误信息，等到提交代码在husky等工具的校验下，代码依旧是提交失败的，如果想给ts、tsx文件提示错误信息需要增加以下配置
.vscode/settings.json
"eslint.validate": [
"javascript",
"javascriptreact",
{"language": "typescript", "autoFix": true },
{"language": "typescriptreact", "autoFix": true }
]3 prettier与eslint融合
融合需要解决eslint与prettier无法关联的问题，解决方案是将prettier的规则加到eslint的config中去，能在vscode中给出错误信息提示，且执行eslint fix时能按照eslint的配置以及prettier的规则同时格式化
3.1 eslint-config-prettier
关闭eslint可能与prettier冲突的规则
3.2 eslint-plugin-prettier
执行eslint --fix时，自动按照prettier的规则格式化代码
3.3 eslint配置
安装以上两个工具，只需要以下一行配置即可
{
"extends": ["plugin:prettier/recommended"]
}此配置有三个作用
- 继承prettier的config规则
- 开启rules的 "prettier/prettier": "error"
- eslint fix的同时执行prettier格式化