通常情況下，一個項目的開發(fā)由多個人員協(xié)作完成花枫。而對于各個開發(fā)者來說刻盐，大家喜愛的編輯器不同，代碼風(fēng)格也不一致劳翰。導(dǎo)致每次在git提交的時候看起來就像進行了大幅度的修改敦锌，為了方便代碼的管理，我們可以在git提交的時候進行代碼的自動格式化佳簸。
接下來乙墙，講一下我的解決問題全過程。
1.出于項目需要，開始查找解決辦法
網(wǎng)上大部分都是關(guān)于通過以下命令安裝依賴然后進行配置
npm安裝：
npm install --save-dev prettier husky lint-staged eslint
yarn安裝
yarn add prettier husky lint-staged eslint --dev
具體步驟大家可以參考以下鏈接听想，不過我使用這個方法并沒有成功腥刹。
代碼提交git時自動格式化并通過ESlint檢測
2.更換安裝依賴方式，繼續(xù)查找
我所開發(fā)的項目用的是yarn管理版本依賴汉买，后來進行各種查找嘗試有一篇文章說換成npm試一下衔峰，果斷更換，還是沒起作用蛙粘。沒辦法垫卤，只能繼續(xù)查找。
3.記得閱讀官方文檔组题，安裝yorkie
開始閱讀官方文檔久橙，發(fā)現(xiàn)一個重要的知識點掏婶。
在安裝之后，
@vue/cli-service也會安裝 yorkie屁桑，它會讓你在package.json的gitHooks字段中方便地指定 Git hook
eslint由于項目本身就有使用旺遮，所以看到這個之后我馬上就把prettier husky lint-staged這三個依賴進行了卸載赵讯，package.json中代碼變成了這樣：
"scripts": {
......
"lint": "vue-cli-service lint"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"dependencies": {
"vue": "^2.6.10",
......
}
開始提交代碼，運行g(shù)it commit時出現(xiàn)亂碼耿眉，本來是想解決掉亂碼問題的边翼，后來無法解決，只好繼續(xù)解決格式化的問題鸣剪。
文檔中提到yorkie fork 自 husky组底，但是之前我對husky進行了幾次的安裝與卸載，會不會造成一些可能出現(xiàn)的錯誤筐骇。在husky卸載的情況下债鸡，對yorkie進行了安裝。
亂碼問題依舊存在铛纬。
4.安裝lint-staged
想到之前按照其他方案解決問題的時候厌均，package.json中除了增加husky的配置，還增加了lint-staged的配置告唆，那么自己是不是因為只加了gitHooks的配置呢棺弊。
在package.json中增加lint-staged的配置（需要安裝lint-staged依賴）：
"scripts": {
......
"lint": "vue-cli-service lint"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [ //標(biāo)注
"eslint --fix",
"git add"
]
},
"dependencies": {
"vue": "^2.6.10",
......
}
修改文件，提交擒悬，成功模她。
如果想要繼續(xù)安裝prettier依賴也可以，安裝之后可以在我上面lint-staged配置標(biāo)注的下一行加入如下代碼
"prettier --single-quote --write '*.{vue}'", //*.{vue}匹配所有的vue文件懂牧，可以進行修改
后來仔細(xì)看了一下缝驳，這個的確可以解決一部分問題，但是有些問題好像依然存在，有時間再繼續(xù)排查是哪里的問題用狱。歡迎大家留言進行討論运怖。
參考：
1.代碼提交git時自動格式化并通過ESlint檢測
2.Vue CLI文檔
3.ESLint官方文檔
4.過濾文件
5.prettier CLI
總結(jié)：
1.保持耐心。問題解決不出來的時候千萬不能著急夏伊。
2.勇于嘗試摇展。多動手，不要只是在腦子里想想溺忧，說不定就成功了呢咏连。
3.多看官方文檔。好多知識點不是看一遍就能看到的鲁森，更不要說記住祟滴。
