我已经无数次在用 create-react-app 搭建完项目以后，在网上搜索怎么配置 Prettier + ESLint 了，这次索性自己写一遍吧。
本文的项目开发环境是 VSCode，并且已经装好 ESLint 插件/扩展 （Prettier 插件是不需要安装的）
首先我们闭着眼睛直接把包装好
yarn add prettier eslint-plugin-prettier eslint-config-prettier -D
接下来还是闭着眼睛，在项目根目录创建配置文件 .prettierrc.json 和.eslintrc.json，并将下面两个代码块中的配置内容分别写进配置文件。想要使用其他格式的配置文件也是完全可以的，一般来说配置文件都会支持流行的 json/yml/js 格式
比较常用的 Prettier 配置项是
{
"singleQuote": true,
"semi": false,
"arrowParens": "avoid",
"trailingComma": "es5",
"printWidth": 120,
"endOfLine": "auto"
}
多说一句，Prettier 官方的定义是
Prettier is an opinionated code formatter
意思就是让你不要太纠结格式了，就按照我的来吧。所以真的不用在格式上花费过多的精力，重要的是团队的风格能够一致。
然后，最基本的 ESLint 配置项（需要同时从 package.json 文件中移除相关的 ESLint 配置。以后可能会添加很多规则，所以不建议直接将配置堆叠到 package.json 文件中）
{
"extends": ["react-app", "plugin:prettier/recommended"],
"plugins": ["prettier"]
}
很简单，最基本的设置就已经完成了。
Tips: 有时候需要重启 VSCode 来使配置生效。
最后还有一个重要的事情，那就是自动格式化和修复和风格配置冲突的代码。
这包括两方面，一个是配置保存时候格式化，一个是配置 commit 格式化。
配置保存时候格式化，是编辑器的集成功能。对于 VSCode 来说，一般在用户设置中配置
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
而配置 commit 格式化，并没有用过，所以也就没法介绍了。
