現在用 VSCode 開發 Vue.js 應用幾乎已經是前端的標配了，但很多時候我們看到的代碼混亂不堪，作為一個前端工程師，單引號雙引號亂用，一段有分號一段沒有分號，有的地方有逗號有的地方沒有逗號，空格回車都對不齊，還說自己做事認真，這不是開玩笑的事情。

我們今天從頭開始，完整地講述一下一個重度代碼潔癖患者該如何用 VSCode 開發 Vue，以及如何把一個已經可以宣判死刑的全身各種格式錯誤幾萬條的項目整容成標準美女。

從安裝開始

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

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

npm install -g @vue/cli

然后，我們開始創建項目：

vue create hello-world

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

安裝完畢：

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

好吧，至少我們需要先安裝 vetur 插件。這幾乎已經確定是開發 Vue 項目的標配了，即使我不說，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或者其它什么你設置eslint的地方，給它加上：

"extends": [ "plugin:vue/essential

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。