本文針對的開發工具是vscode, 配合vue-cli建立的專案，告訴你安裝什麼外掛，每個外掛的作用，每行配置程式碼的作用

一、外掛

網上搜索vscode外掛的文章，動輒十幾個，其實根本用不了那麼多，很多外掛的作用還有重疊，電腦效能還被白白浪費。這裡精簡為主，每一個外掛都發揮它最大的作用，並儘量說明它們的作用

Vetur

用vue開發的必裝，官方推薦,別糾結用哪個，就它了。
作用：高亮.vue檔案，附帶有格式化功能，配合Eslint外掛對程式碼進行格式化檢查

Eslint

如果你想你（團隊）的程式碼風格所有地方看起來都像是同一個人寫的，就靠它咯
作用：檢查你的js、html、css程式碼，確保它們符合規範，並且程式碼風格保持一致性，強制性的規則，你少寫一個空格或者多敲一個回車都會被嚴格的指出來，強迫症的福音，第一次用它的同學可能會抓狂，熟悉後你會感謝它
使用：

ps:對於我這種從前寫Java的人來說，剛開始也是無法接受這種tab鍵2個空格、不加分號的Standard風格，不過一週以後再看原先的Java程式碼反倒不習慣了

二、配置

其實裝好上面幾個外掛你已經可以滿足最基本的開發需求了，但現在還沒有加任何配置，我們來配置下滿足些額外的需求

1.程式碼錯誤實時提示

少寫了一個空格，或者多寫了一個分號，都能馬上以醒目的波浪線提示出來，滑鼠懸浮上去還有錯誤提示，雙擊波浪線的程式碼還會出現一個小燈泡，點選燈泡可以自動幫你修正程式碼格式：

我們可以找到編輯器左上角，依次開啟 檔案、 首選項、 設定，將i面配置加入到右邊的使用者設定中：

"eslint.validate": [
    "javascript",
    "javascriptreact",
     {
         "language": "vue",
         "autoFix": true
     }
],
 

2.ctrl+s儲存時自動修正格式錯誤的js程式碼

在配置里加入下面的json:

"eslint.autoFixOnSave": true,

3.格式化寫的程式碼

在vue檔案裡，按下滑鼠右鍵，在選單裡你會發現有個格式化檔案按鈕，我們點選它，你會發現，本來圖A好好的程式碼格式化後變成了圖B，由於不符合standard的規範，就報錯了：
圖A：

格式化後多幫我們加了分號，還把單引號變成了雙引號。
這是由於vetur外掛預設格式化vue檔案裡面的js程式碼使用的prettier,和我們的standard規範有衝突，你可以點選這裡檢視vetur外掛格式化的預設配置

既然知道了原因，我們可以覆蓋它的預設配置：

 "vetur.format.defaultFormatter.js": "vscode-typescript",

再試一次格式化，發現問題解決了，不過還是報錯：

"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

這次格式化vue檔案終於沒有報錯啦

別急哈，問題還沒完：

請你仔細的觀察下整個vue檔案格式化後的樣子，有沒有發現html模板程式碼沒有被格式化？

因為vetur外掛的預設格式化配置裡，是沒有為html模板格式的，需要我們手動指定配置:

4.儲存時自動格式化

每次寫完程式碼自己右鍵選單格式化似乎有點麻煩，所以我們可以讓它更智慧用電，ctrl+s一儲存就立馬自動格式化:

"editor.formatOnSave": true,

其他與外掛無關的配置

在vue檔案，預設按tab會有4個空格的縮排，我們需要的是2個:

 "editor.tabSize": 2,

小結

好啦，能滿足你基本寫程式碼需求的外掛和配置我講完了，不多，配合vue-cli專案真的很省事，2個外掛，幾行配置就搞定了，更重要的是，你能知道每個外掛、每行配置都幹了什麼事情，解決了什麼問題，而不是裝了一堆不知道作用的外掛，配置了一堆自己也看不懂的配置。
這裡彙總下上面的配置:

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "editor.formatOnSave": true,
    "editor.tabSize": 2,

其他外掛

vscode-icons 美化左邊資源管理器裡專案檔案的圖示，每一種檔案字尾都對應一個圖示，很直觀明瞭
vscode-background 設定程式碼的背景（找張喜歡的小姐姐作為背景），腐宅必備
Path Autocomplete 程式碼引用其他資源（比如圖片）寫相對路徑時，會有提示