我已經(jīng)無(wú)數(shù)次在用 create-react-app 搭建完項(xiàng)目以后烙丛，在網(wǎng)上搜索怎么配置 Prettier + ESLint 了率拒，這次索性自己寫一遍吧茶敏。
本文的項(xiàng)目開發(fā)環(huán)境是 VSCode下硕，并且已經(jīng)裝好 ESLint 插件/擴(kuò)展 （Prettier 插件是不需要安裝的）
首先我們閉著眼睛直接把包裝好
yarn add prettier eslint-plugin-prettier eslint-config-prettier -D
接下來還是閉著眼睛玉工，在項(xiàng)目根目錄創(chuàng)建配置文件 .prettierrc.json 和.eslintrc.json羽资，并將下面兩個(gè)代碼塊中的配置內(nèi)容分別寫進(jìn)配置文件。想要使用其他格式的配置文件也是完全可以的瓮栗，一般來說配置文件都會(huì)支持流行的 json/yml/js 格式
比較常用的 Prettier 配置項(xiàng)是
{
"singleQuote": true,
"semi": false,
"arrowParens": "avoid",
"trailingComma": "es5",
"printWidth": 120,
"endOfLine": "auto"
}
多說一句削罩，Prettier 官方的定義是
Prettier is an opinionated code formatter
意思就是讓你不要太糾結(jié)格式了，就按照我的來吧费奸。所以真的不用在格式上花費(fèi)過多的精力弥激，重要的是團(tuán)隊(duì)的風(fēng)格能夠一致。
然后愿阐，最基本的 ESLint 配置項(xiàng)（需要同時(shí)從 package.json 文件中移除相關(guān)的 ESLint 配置微服。以后可能會(huì)添加很多規(guī)則，所以不建議直接將配置堆疊到 package.json 文件中）
{
"extends": ["react-app", "plugin:prettier/recommended"],
"plugins": ["prettier"]
}
很簡(jiǎn)單缨历，最基本的設(shè)置就已經(jīng)完成了以蕴。
Tips: 有時(shí)候需要重啟 VSCode 來使配置生效。
最后還有一個(gè)重要的事情辛孵，那就是自動(dòng)格式化和修復(fù)和風(fēng)格配置沖突的代碼丛肮。
這包括兩方面，一個(gè)是配置保存時(shí)候格式化魄缚，一個(gè)是配置 commit 格式化宝与。
配置保存時(shí)候格式化焚廊，是編輯器的集成功能。對(duì)于 VSCode 來說习劫，一般在用戶設(shè)置中配置
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
而配置 commit 格式化咆瘟，并沒有用過，所以也就沒法介紹了诽里。
