preittier和eslint有npm包也有vscode插件懒豹，平時應該怎么搭配使用这溅，還有prettier格式化代碼和eslint會產(chǎn)生規(guī)則沖突的問題。比如你在prettier中設置了semi:false,而eslint的推薦規(guī)則是強調(diào)你必須在行尾加分號的。就會產(chǎn)生沖突踢涌。
解決eslint和prettier的沖突問題
有兩種方法兼蜈，一個是直接放棄使用prettier攘残，反正eslint也能格式化代碼，把js加入prettier忽略的文件里面
另一個是使用prettier官方的解決方案eslint-config-prettier,他的原理是將eslint里面和prettier重疊的配置都關掉为狸。
npm install --save-dev eslint-config-prettier
在eslint的配置文件r.eslintrc.* 里面歼郭，進行配置，只需在extends里面放在最后一行辐棒，因為要保證覆蓋前面的配置病曾。
{
"extends": [
"some-other-config-you-use",
"prettier"
]
}
單獨使用vscode插件的不安裝npm包的方法
不想安裝npm包的理由很簡單，因為你每個項目都要npm install這么一下漾根，多了一大堆文件泰涂，你搭腳手架的等待時間變長。你刪除文件花的時間也變長辐怕，要是能在vscode插件上直接配好不是很方便嗎逼蒙。
prettier的vscode插件 esbenp.prettier-vscode
prettier的vscode的插件是集成了功能的，可以獨立使用寄疏。并且可以讀取當前項目目錄的配置文件其做，優(yōu)先級高于你在編輯器的配置。并且你在項目安裝了prettier赁还，他會優(yōu)先讀取妖泄，并且有個配置項配置了 prettier.resolveGlobalModules為true，他也會從全局下載的npm包中找prettier艘策，都找不到了才會用編輯器綁定的prettier蹈胡。
而官方推薦的方式是在項目目錄中安裝本地開發(fā)依賴
關于配置文件讀取的優(yōu)先級如下：
- Prettier configuration file
.editorconfig- Visual Studio Code Settings (Ignored if any other configuration is present)
所以，prettier 可以單獨使用，但是還是建議安裝本地開發(fā)依賴
eslint的vscode插件dbaeumer.vscode-eslint
eslint的vscode插件并不能單獨使用罚渐，你只能全局安裝一個或者項目文件夾里面安裝一個却汉。
全局安裝一個就能正常使用了npm install -g eslint
綜上，如果要講prettier+eslint一起使用荷并，你至少要在項目文件夾中安裝個eslint-config-prettier配置好合砂，并且全局安裝eslint
然后最推薦的方式還是在項目文件夾安裝，因為作為開發(fā)依賴，你需要把它記錄到package.json中保持一致性腊嗡。比如說你把這個項目傳到git侨舆，然后過一陣子有人下載下來，要用eslint缘屹，版本跟你用的不一樣，可能就會因為配置變化多一堆報錯侠仇。轻姿。。
另外開發(fā)依賴里面你還需要一個git hook逻炊，這些都是在本地配置比較方便互亮。
作為開發(fā)依賴安裝eslint+prettier的流程
01.安裝prettier相關
npm install prettier --save-dev
npm install eslint-config-prettier --save-dev
然后把你寫的prettier文件復制過來，我對默認配置只改了兩項余素。
//.prettierrc.js
module.exports = {
semi: false,
singleQuote: true,
}
02.安裝eslint相關
npm install eslint --save-dev
然后安裝你想用的js代碼風格之類的胳挎，可以用npx eslint --init,他預設了一些配置的選項給你選，包括typescript也可以支持溺森。
配置完eslint慕爬，你就可以配置和prettier的兼容了。
.eslintrc.js里extends里面最后加上prettier
{
"extends": [
"some-other-config-you-use",
"prettier"
]
}
03.配置git hooks
這里介紹一種用lint-stage進行配置的方法,
直接安裝npm install --save-dev lint-staged husky
husky現(xiàn)在的版本號是6.0屏积，配置方式已經(jīng)發(fā)生了變化医窿，網(wǎng)上很多教程是4的版本號已經(jīng)不適用了。
# 執(zhí)行完這樣代碼會多出一個.husky目錄
npx husky install
# 后面字符串參數(shù)就是pre-commit階段里面會執(zhí)行的命令炊林，你也可以直接編輯pre-commit文件添加命令
npx husky add .husky/pre-commit "npx lint-staged"
然后在package.json文件里添加lint-staged的配置姥卢，注意prettier要放在最后執(zhí)行
"lint-staged": {
"**/*.js": [
"eslint ",
"prettier --write"
]
},
