來自：SegmentFault，作者：張京
鏈接：https://segmentfault.com/a/1190000019055976
現(xiàn)在用VSCode開發(fā)Vue.js應(yīng)用幾乎已經(jīng)是前端的標(biāo)配了横浑，但很多時候我們看到的代碼混亂不堪乾忱，作為一個前端工程師，單引號雙引號亂用抖苦，一段有分號一段沒有分號毁菱，有的地方有逗號有的地方?jīng)]有逗號，空格回車都對不齊锌历，還說自己做事認(rèn)真贮庞，這不是開玩笑的事情。
我們今天從頭開始究西，完整地講述一下一個重度代碼潔癖患者該如何用vscode開發(fā)vue窗慎，以及如何把一個已經(jīng)可以宣判死刑的全身各種格式錯誤幾萬條的項目整容成標(biāo)準(zhǔn)美女。
從安裝開始
為了準(zhǔn)確起見，我們把vscode里所有插件全部禁用遮斥，把用戶設(shè)置清空峦失，以讓它盡可能恢復(fù)成原始的樣子：
作為代碼潔癖患者，對于系統(tǒng)的版本要求一定也是最苛刻的术吗，不管什么時候尉辑，都讓我們把所有的系統(tǒng)能升級的都升級到最高版本：
npm install -g @vue/cli
然后，我們開始創(chuàng)建項目：
vue create hello-world
在這里较屿，一定要選擇第一項：babel + eslint隧魄，這兩個是必不可少的。我見到有些人嫌eslint麻煩吝镣，居然在項目建立好之后手工把eslint關(guān)掉的堤器，簡直無語。
安裝完畢：
我們先不急著執(zhí)行末贾，執(zhí)行代碼是最容易的事情闸溃，我們先打開代碼看一下：
好吧，至少我們需要先安裝vetur插件拱撵。這幾乎已經(jīng)確定是開發(fā)vue項目的標(biāo)配了辉川，即使我不說，vscode也會強烈建議你安裝它拴测。
裝上vetur以后多少有點人樣了乓旗。接下來我們來試一試能不能自動格式化，這部分才是潔癖患者的最愛集索。胡亂加幾個空格屿愚，然后保存試試看：
不能格式化，連個提示都沒有务荆！
用lint格式化
就算vscode里的vetur不能幫我們自動格式化妆距，好在package.json命令里還有一個lint命令，我們看看lint命令能不能幫我們自動格式化：
lint居然說沒有錯誤函匕！明明就是多了很多空格的錯誤好吧娱据，為什么？
這是因為缺省的vue-cli沒有為我們安裝@vue/prettier插件盅惜，我們先來手工安裝一下：
yarn add -D @vue/eslint-config-prettier
然后在package.json或者.eslintrc.js或者其它什么你設(shè)置eslint的地方中剩，給它加上：
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/prettier"
],
特別是最后這一個@vue/prettier，非常重要抒寂。然后再執(zhí)行yarn lint结啼。多余的空格被自動干掉了，但是我們發(fā)現(xiàn)有一些地方同時也被篡改了：
所有的單引號被變成雙引號了屈芜，原本行尾沒有的分號被加上了分號妆棒。這是為什么呢？因為我們雖然引入了prettier，但是還沒有對prettier做設(shè)置糕珊，我們在項目的根目錄下創(chuàng)建一個.prettierrc.js文件动分，然后在其中加入：
module.exports = {
semi: false,
singleQuote: true
}
再次執(zhí)行yarn lint，現(xiàn)在我們看到lint已經(jīng)能夠起作用了红选。它不但能把我們多余插入的空格刪掉澜公，并且能按照規(guī)則把雙引號變成單引號，把行尾多余的分號刪掉喇肋。當(dāng)然坟乾，關(guān)于行尾加不加分號這是一個哲學(xué)命題，你可以根據(jù)你個人的喜好自行決定蝶防。在這里甚侣，我們權(quán)且按照vue-cli的標(biāo)配執(zhí)行。
到這一步很關(guān)鍵间学，假設(shè)你拿到一個爛的不再爛的vue項目殷费，里面有幾千個.vue文件，幾萬個各種格式錯誤低葫，也都能通過yarn lint這一行命令把它們?nèi)啃拚^來详羡！
在vscode里格式化
事情還沒有完，我們注意到雖然yarn lint命令能在編寫完代碼之后幫我們格式化嘿悬，但是既然我們是用vscode進(jìn)行開發(fā)实柠，我們當(dāng)然希望能在vscode里直接看到對于錯誤的標(biāo)注。
這時候我們需要在vscode里再安裝一個插件eslint善涨。
你以為安裝上eslint插件就行了嗎窒盐？不行的。因為eslint并不知道我們的.vue文件里面包含了js語法钢拧，所以還需要打開我們的vscode設(shè)置文件蟹漓。
注意：這里一定要設(shè)置到項目的設(shè)置里，而不要只是設(shè)置到你自己個人的設(shè)置里娶靡，否則你團隊的小伙伴隨便一改又亂掉了。正確的方法是在你項目的文件夾下有一個.vscode文件夾看锉，而vue最討厭的地方是它居然會把這個文件夾放到.gitignore里姿锭，這個錯誤你必須要糾正過來，也就是說從.gitignore文件里把.vscode刪掉伯铣。切切呻此。
在你項目的settings.json里文件里添加以下代碼：
{
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
}
這時候所有錯誤都被標(biāo)注出來了，注意看左側(cè)腔寡，一定要讓這個settings.json文件是綠色的焚鲜，而不能是灰色的，如果是灰色的，請檢查你的.gitignore文件：
因為我們在settings.json文件里設(shè)置了autoFixOnSave忿磅，所以不管多么亂的格式糯彬，只要一按Ctrl+S保存，自動就幫我們把代碼格式整理好了葱她，是不是很方便呢撩扒？
和Prettier的沖突
有些時候我們的vscode里插件裝的比較多，譬如還安裝了prettier插件吨些，因為我們不只開發(fā)vue項目搓谆，可能還有其它類型的js項目特別是傳統(tǒng)js項目，需要用到prettier進(jìn)行美化豪墅，而prettier的一些功能是會和eslint相沖突的泉手，比如說我們在全局設(shè)置了prettier的formatOnSave，這個功能就會和eslint的autoFixOnSave打架偶器，為了避免這個矛盾斩萌，我們通常還會在本項目的settings.json文件里再多加幾個選項，類似于這樣：
"editor.tabSize": 2,
"editor.formatOnSave": false,
"prettier.semi": false,
"prettier.singleQuote": true
有了這些設(shè)置状囱，基本上prettier就不會和eslint打架了术裸。
小結(jié)
以上就是用vscode開發(fā)vue程序的標(biāo)配，并不像網(wǎng)上有些文章說的那么簡單亭枷，不是只需要配一個eslint就能解決的事情袭艺，這里還用到了vetur，eslint和prettier叨粘，把幾個工具綜合用好猾编，才能真正達(dá)到我們的錯誤隨時可見，保存自動修改升敲，更正既往錯誤的目的答倡。希望每個前端工程師寫出的代碼都如出一人之手，漂亮簡潔干凈驴党。
我們的目標(biāo)始終如一：0錯誤0警告瘪撇。
