ESLint 与 Prettier
在描述两者冲突前，我们先了解一下两者各自的作用，为啥非要两个一起用。
- ESLint
ESLint 解决的是代码质量问题。比如末尾是否空行，箭头函数是否需要括号，定义变量是否定义未使用，变量是否使用在定义之前等等。
- Prettier
Prettier 解决是代码“美丽”问题。比如末尾是否空行，箭头函数是否需要括号。但是他没有变量是否定义未使用，，变量是否使用在定义之前等检查代码质量的功能，它仅有的是代码格式化的美观功能。
看到这里你就应该清楚，其实我们可以选择不要prettier，但是eslint是必须的，因为代码质量远比代码美观来的重要的多。
冲突
从上面的各自作用及功能，可以发现他们同时具备代码“美观”功能，这也是导致出现冲突的原因。
现象
在VSCode中配置了保存自动格式化后，eslint中将代码进行格式化后，会重新被prettier再次格式化。因此最终的格式化效果是Prettier提供的，然而我们代码校验使用的是ESLint，因此往往会出现冲突，最常见的冲突就是：eslint fix后变成单引号，保存（prettier）自动格式化后变成双引号，导致代码校验异常。
通过前面分析我们知道，解决方法各种各样，不过本质上都是一样的，就是将格式化的代码与eslint要求的保持一致。
比如前面说到的单引号和双引号问题有几种解决方法：
- .prettierrc.json
"singleQuote": true,
- .editorconfig
[*.{js,jsx}]
quote_type = single
- .setting.config
"prettier.singleQuote": true,
"prettier.jsxSingleQuote": true
如前面所说，不管哪种方式都是让格式化插件（prettier，editorconfig）格式化后的代码效果与eslint保持一致。
解决
先手动prettier格式化，在自动ESLint Fix
为什么不能保存自动格式化呢？因为保存自动格式化的操作是所有格式化操作执行完成之后在执行，因此如果配置了
"editor.formatOnSave": true，eslint Fix之后的代码会重新替换回去。
这种实现方式思路是：先手动执行一下格式化（快捷键：alt + shift + F），在自动通过eslint fix 解决不符合eslint问题的代码。
虽然这种方式需要手动格式化，但是对我来说无疑是最简单最快捷的解决方式，而且不需要太多的配置。
在.vscode/setting中增加下面配置即可。
"eslint.codeActionsOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
将prettier配置成与eslint格式一样
这种方式存在一些问题，因为prettier和eslint的参数并非完全一致，比如：'space-before-function-paren':0,配置，在eslint中有，prettier中没有。这样就不得不折中处理，让eslint忽略这种报错。
但是这种方式有个好处就是可以保存自动格式化（"editor.formatOnSave":true）。使用方式配置如下：
.vscode/setting.json
{
"prettier.eslintIntegration": true, // prettier 集成eslint
"editor.formatOnSave": true // 保存自动格式化
}
.prettierrc.json
注意：需要与你项目的eslint保持一致。
{
"trailingComma": "all",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"bracketSpacing": false,
"arrowParens":"always"
}
.eslintrc.js
这个步骤是可选的，主要是针对eslint中存在的配置，但是prettier中不存在，必须让eslint适应prettier（即：prettier后如果有报错，又没有参数，只能忽略报错。）
rules: {
'space-before-function-paren': 0, // 忽略报错
},
吐槽：感觉先好多文章都是抄来抄去，关键不分析原因。搜了几篇文章都没说原因，就扔个解决方案，草率的很。
