一.vue專用。

vetur  目前比較好的Vue語法高亮，語法高亮、智慧感知、Emmet等。

  Vue2程式碼段（包括Vue2 api、vue-router2、vuex2）

第一步：新建模板並儲存

檔案 --> 首選項 --> 使用者程式碼片段 --> 輸入vue，選擇vue.json -->複製 第三步中的模板內容中內容儲存

第二步：新增配置，讓vscode允許自定義的程式碼片段提示出來

// Specifies the location of snippets in the suggestion widget
"editor.snippetSuggestions": "top",
// Controls whether format on paste is on or off
"editor.formatOnPaste": true
 

第三步: 複製以下程式碼，儲存重啟vscode

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            " <div class=\"page\">\n",
            " </div>",
            "</template>\n",
            "<script>",
            "export default {",
            " data() {",
            " return {\n",
            " }",
            " },",
            " components: {\n",
            " }",
            "}",
            "</script>\n",
            "<style scoped type=\"text/css\">",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }
}
 

第四步:測試是否新增成功

測試方法： 新建vue字尾檔案，輸入vue，按下tab鍵，OK。缺點是：無法像sublime一樣新建一個vue檔案就可以自動帶上對應的模板。

二.react專用。

 react的程式碼提示，如componentWillMount方法可以通過cwm直接獲得。

React Native Tools 新增對 React Native專案的支援，快速書寫es6以及jsx。

 對使用了css modules的jsx標籤的類名補全和跳轉到定義位置。

react的jsx中補全html標籤，在首選項的設定中加入

 "emmet.includeLanguages": {
"javascript": "javascriptreact"
},
 

三.CSS。

cssrem — px值轉rem

CSS Peek  使用此外掛，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 檔案中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你傳送樣式設定的 CSS 程式碼。

Color Info 這個便捷的外掛，將為你提供你在 CSS 中使用顏色的相關資訊。你只需在顏色上懸停游標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關資訊了。

Sass 語法高亮，自動提示功能

— scss/sass檔案儲存可自動生成並同步編譯成同名css檔案

— 微信小程式WXSS檔案專用，儲存可自動生成並同步編譯成同名css檔案

四.Git。

Git Blame 在狀態列顯示當前行的Git資訊Git History(git log) 檢視git logGitLens 顯示檔案最近的commit和作者，顯示當前行commit資訊

五.其他。

Icon Fonts 這是一個能夠在專案中新增圖示字型的外掛。該外掛支援超過 20 個熱門的圖示集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

Auto Rename Tag自動重新命名標籤，配合上面的外掛使用，基本上能趕上IDEA系的功能了。

Bracket Pair Colorizer 每一對括號用不同顏色區別 （括號強迫症必備），讓括號擁有獨立的顏色，易於區分。可以配合任意主題使用。

執行選中程式碼段（支援大量語言，包括Node）

— 滑鼠移到路徑名按住ctrl可開啟檔案

npm — 執行npm命令

Open-In-Browser  由於 VSCode 沒有提供直接在瀏覽器中開啟檔案的內建介面，所以此外掛在快捷選單中添加了在預設瀏覽器檢視檔案選項，以及在客戶端（Firefox，Chrome，IE）中開啟命令面板選項

HTML Boilerplate 通過使用 HTML 模版外掛，你就擺脫了為 HTML 新檔案重新編寫頭部和正文標籤的苦惱。你只需在空檔案中輸入 html，並按 Tab 鍵，即可生成乾淨的文件結構。Prettier Prettier 是目前 Web 開發中最受歡迎的程式碼格式化程式。安裝了這個外掛，它就能夠自動應用 Prettier，並將整個 JS 和 CSS 文件快速格式化為統一的程式碼樣式。如果你還想使用 ESLint，那麼還有個 Prettier – Eslint 外掛。

Minify 這是一款用於壓縮合並 JavaScript 和 CSS 檔案的應用程式。它提供了大量自定義的設定，以及自動壓縮儲存並匯出為.min檔案的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工作。

Path Intellisense 自動路勁補全，預設不帶這個功能的。

fileheader  頂部註釋模板，可定義作者、時間等資訊，並會自動更新最後修改時間。

ESLint 是一個開源的 JavaScript 程式碼檢查工具，使用 Node.js 編寫，由 Nicholas C. Zakas 於 2013 年 6 月建立。ESLint 的初衷是為了讓程式設計師可以建立自己的檢測規則，使其可以在編碼的過程中發現問題而不是在執行的過程中。ESLint 的所有規則都被設計成可插入的，為了方便使用，ESLint 內建了一些規則，在這基礎上也可以增加自定義規則。

第六.主題

One Dark Pro  源於Atom,老版本的Atom One Dark主題可以扔了。

One Monokai 

Tiny Light 類似HBuilder淺綠色風格主題。

Light 或 Light+ 白色主題