現(xiàn)在用 VSCode 開發(fā) Vue.js 應(yīng)用幾乎已經(jīng)是前端的標(biāo)配了，但很多時(shí)候我們看到的代碼混亂不堪，作為一個(gè)前端工程師，單引號(hào)雙引號(hào)亂用，一段有分號(hào)一段沒有分號(hào)，有的地方有逗號(hào)有的地方?jīng)]有逗號(hào)，空格回車都對(duì)不齊，還說自己做事認(rèn)真，這不是開玩笑的事情。

我們今天從頭開始，完整地講述一下一個(gè)重度代碼潔癖患者該如何用 VSCode 開發(fā) Vue，以及如何把一個(gè)已經(jīng)可以宣判死刑的全身各種格式錯(cuò)誤幾萬條的項(xiàng)目整容成標(biāo)準(zhǔn)美女。

從安裝開始

為了準(zhǔn)確起見，我們把 VSCode 里所有插件全部禁用，把用戶設(shè)置清空，以讓它盡可能恢復(fù)成原始的樣子：

作為代碼潔癖患者，對(duì)于系統(tǒng)的版本要求一定也是最苛刻的，不管什么時(shí)候，都讓我們把所有的系統(tǒng)能升級(jí)的都升級(jí)到最高版本：

npm install -g @vue/cli

然后，我們開始創(chuàng)建項(xiàng)目：

vue create hello-world

在這里，一定要選擇第一項(xiàng)：babel + eslint，這兩個(gè)是必不可少的。我見到有些人嫌 eslint 麻煩，居然在項(xiàng)目建立好之后手工把 eslint 關(guān)掉的，簡(jiǎn)直無語。

安裝完畢：

我們先不急著執(zhí)行，執(zhí)行代碼是最容易的事情，我們先打開代碼看一下：

好吧，至少我們需要先安裝 vetur 插件。這幾乎已經(jīng)確定是開發(fā) Vue 項(xiàng)目的標(biāo)配了，即使我不說，VSCode 也會(huì)強(qiáng)烈建議你安裝它。

裝上 vetur 以后多少有點(diǎn)人樣了。接下來我們來試一試能不能自動(dòng)格式化，這部分才是潔癖患者的最愛。胡亂加幾個(gè)空格，然后保存試試看：

不能格式化，連個(gè)提示都沒有！

用lint格式化

就算 VSCode 里的 vetur 不能幫我們自動(dòng)格式化，好在 package.json 命令里還有一個(gè) lint 命令，我們看看 lint 命令能不能幫我們自動(dòng)格式化：

lint 居然說沒有錯(cuò)誤！明明就是多了很多空格的錯(cuò)誤好吧，為什么？

這是因?yàn)槿笔〉?vue-cli 沒有為我們安裝 @vue/prettier 插件，我們先來手工安裝一下：

yarn add -D @vue/eslint-config-prettier

然后在package.json或者.eslintrc.js或者其它什么你設(shè)置eslint的地方，給它加上：

"extends": [ "plugin:vue/essential

總結(jié)

以上是生活随笔為你收集整理的eslint vscode 自动格式化_使用 VSCode 的必备三大神器，这才是开发 Vue 的真香解决方案...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。