协调eslint和prettier，让代码书写更加流畅
前言
最近在和同事合作开发一个项目，忘记一开始约定好项目的规范和格式，导致大家都按照自己的习惯去配置了eslint，prettier，当合并代码后就有了下面的情形:
所以，预先需要协调prettier和eslint的配置，而在梳理两种工具的使用时，遇到了一些问题，写下本文记录下来。
eslint
对于eslint，想必大家都不陌生，是在我们日常开发中用于代码格式检查的工具，而关于eslint的详细配置，不是本文今天的重点，今天我们要说的，是如何在工程建设中灵活的使用它。
项目中安装eslint
我们可以在项目中，安装eslint，使用指令
npm install eslint使用指令构建它的配置文件
eslint --init它会指引我们构建一个eslintrc.js的配置文件，并初始化相关的配置
具体的配置项，可以参阅官网:https://eslint.org/docs/latest/
注意除了js的配置文件，还支持json，yml类型的配置文件，具体的生效权重为
.js > .json > .yml
eslint插件
初始化eslint的配置文件之后，eslint就会根据配置规则检查我们的代码，但是检测的错误只会在控制台进行输出
并且无法自动修复，在开发的时候多少会有点不便，所以我们就需要安装 eslint 插件来配合使用。
安装启用eslint插件之后，代码中的格式错误会直接标红提示，并且我们可以通过ctrl + s的快捷键来自动修复它们。
此外，eslint插件也可以配置eslint规则，但是如果检测到项目中有eslint的配置文件，就会覆盖本地的规则。
git husky配置
配置eslint是为了让我们找出格式的错误，但有时候我们会忘记解决代码中的eslint报错，将有问题的代码提交到远端仓库，所以我们需要在 git husky中，配置eslint的检查规则。
在package.json中加入相关配置
"husky": {
"hooks": {
"pre-commit": "npm run eslint"
}
},
//...
"scripts": {
//...
"eslint": "eslint src --ext .ts,.tsx,.js,.jsx --max-warnings=0",
"fix": "eslint src --ext .ts,.tsx,.js,.jsx --fix"
},加上git husky的配置之后，在每次git commit之前都会对代码做格式校验，直到错误为0才可以通过。
当然，为了能快速修复这些格式错误，也可以配置npm run fix的快捷指令。
根据eslint规则格式化代码
如果我们每次发现eslint报错之后再去手动修复，会比较的浪费时间，所以我们可以配置eslint的保存自动修复来提高效率，在本地或者项目的setting.json中加入配置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html"
],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html"
],配置之后，每当我们保存js文件，就会自动启动eslint代码修复。
prettier
prettier是一个代码美化的工具，它可以帮助我们规范化我们代码的格式，那么用了eslint为何还要使用prettier呢，因为eslint只对js生效，剩下的比如json,css类型的文件我们需要prettier来帮助我们格式化
项目中安装prettier
我们可以在项目中，安装prettier，使用指令
npm install prettier同eslint一样，我们可以新建一个配置文件**.prettierrc.js**。
然后配置项可以参阅:https://prettier.io/docs/en/api.html
同样需要注意的是除了js的配置文件，还支持json，yml类型的配置文件，具体的生效权重为
.js > .json > .yml
prettier的vscode插件
vscode提供了prettier的插件，让我们可以在本地编写一套prettier的配置并使用
然后我们可以在VScode的setting.json中进行配置，比如，我们可以指定prettier为一些类型文件的默认格式化工具。
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},配置一些基本语法
//...
// #在对象或数组最后一个元素后面不加逗号
"prettier.trailingComma": "all",
// (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.arrowParens": "avoid",
// 句尾添加分号
"prettier.semi": true,然后配置项可以参阅:https://prettier.io/docs/en/api.html
注意和eslint一样，如果项目中有prettier的配置文件，那么本地的prettier配置就会被覆盖。
项目的setting.json
有些情况下，我们也会给项目添加一个setting.json的配置文件
在里面，我们也可以进行prettier的配置，最后，生效的规则为
项目中的配置文件 > 项目中的setting.json > 本地的setting.json
prettier和eslint
正如上面所说，prettier和eslint我们都需要用到，但由于它们实际的配置规则并不完全一样，所以使用的时候难免会有一些问题，我们可以利用eslint的插件扩展机制，来安装prettier的扩展包，进而规避这一问题。
eslint-plugin-prettier
eslint有extends和plugins两个配置。plugins要引入对应的插件模块，然后配置相对应的规则rules才会生效。而extends是已经配置好的规则，后面的extends会覆盖前面的extends。
安装
npm install prettier eslint-config-prettier eslint-plugin-prettier -D然后在eslint中新增配置
"extends": ["...","plugin:prettier/recommended"]然后eslint在校验的时候就会参考prettier的规则，并且会关闭eslint和prettier有冲突的地方，即以prettier为准，而没有定义的规则则以eslint的为准.
如果项目有prettier的配置文件，在校验的时候也会被参考进去，而本地的配置则不会被参考，vscode的插件也不会被参考。
最后
感谢你能看到这里，本文梳理了各种类型的eslint和prettier配置，并分析它们的生效情况，希望能对你有用，之后有时间会梳理一下它们的详细配置，当然，如果可以的话，也希望你能给本文点个赞呢。