簡評：VSCode 是一個開源的跨平臺編輯器，是我最滿意的 IDE 之一。本文介紹了幾種使用的外掛，確實解決了很多的痛點。

Quokka.js

Quokka.js 會在您鍵入程式碼編輯器中顯示各種執行結果時立即執行您的程式碼。支援 JavaScript 和 TypeScript。

類似的 Extension:
- Code Runner  — 支援多種語言例如： C，C++，Java，JavaSript，PHP，Python，Perl，Perl6 等
- Runner

Bracket Pair Colorizer 和 Indent Rainbow

大部分的語言都需要使用括號，但是括號之間的巢狀會讓程式碼看得很難受。 Bracket Pair Colorizer 和 Indent Rainbow，這兩個外掛可以讓不同縮減的括號顯示不同的顏色。
使用前

Snippets

Snippets 是一些常用的程式碼片段，比如說 import React from ‘react’; 這些常用的程式碼，我們只需要打 imr 然後按下 tab 鍵就能自動幫我們補全。同樣的 clg 會變成 console.log。

一些不錯的 extension 有
- JavaScript (ES6) code snippets
- React-Native/React/Redux snippets for es6/es7
- React Standard Style code snippets - Visual Studio Marketplace
- React Standard Style code snippets - Visual Studio Marketplace

TODO 高亮

通常我們編寫程式碼的時候，會覺得當前實現不優雅，有更好的實現方式。我們會習慣性的加上// TODO: Needs Refactoring 或者其他內容。不過時間久了我們就習得一個技能自動忽略 TODO。 Todo Highlighter 這個外掛可以督促你趕緊把這個問題處理了。他會在還有 TODOs / FIXMEs 的地方出現高亮提示。（外掛都已經幫到這份上了，之後修行就靠個人了）

類似的 Extension：
- Todo+
- Todo Parser

成本提示

Import Cost 這個擴充套件簡直驚豔到我了，之前寫程式碼的時候很少有關注匯入包的大小。只有在後期優化的時候才考慮這些問題。但是這個外掛可以在你匯入包的時候就提示這個包有多大。

REST 客戶端

作為一個 Web 開發，我們經常需要使用 REST API。為了檢測 URL 並檢測響應，我們一般會使用 Postman 這類工具來測試。但是如果使用了 REST Client 這個外掛我們就可以直接在 VSCode 中來測試我們的 API 了。

自動補全標籤和聯動重名標籤

在 VSCode 中輸入一半的標籤會自動幫忙補全另一半，但是如果我後期想修改的話需要就需要兩邊都要改了。 Auto Close Tag 和 Auto Rename Tag 外掛可以很好的解決這個問題。

Auto Rename Tag

Auto Close Tag

類似的外掛：
- Auto Complete Tag
- Close HTML/XML tag - Visual Studio Marketplace

GitLens

GitLens 可以增強 VSCode 內建 Git 的功能。例如 commits 搜尋，歷史記錄和顯示的程式碼作者身份具體功能可以檢視 Feature List。

類似的 Extension：
- Git History  - 顯示提交歷史記錄的美麗圖表等等。推薦。
- Git Blame  - 它允許您在當前選定行的狀態列中看到 Git Blame 資訊。GitLens 也提供了類似的功能
- Git Indicators  - 它允許您檢視受影響的檔案以及狀態列中新增或刪除的行數。
- Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! - 它允許您使用瀏覽器中開啟具體的 repo。

Git Project Manager

Git Project Manager 允許你直接從 VSCode 視窗開啟一個新的視窗。這樣我們就可以在 VSCode 中切換倉庫了。

在安裝這個 外掛 後，需要設定 gitProjectManager.baseProjectsFolders 包含我們需要的倉庫。

例如 ：

{
    "gitProjectManager.baseProjectsFolders": [
        "/home/user/nodeProjects",
        "/home/user/personal/pocs"
    ]
} 

類似的 Extension：
- Project Manager

Indenticator

indenticator 可以直觀的突出當前的縮排深度。可以容易區分不同層次的縮排。

類似的 Extension：

• Guides
• Guides - Visual Studio Marketplace

VSCode 圖示

可以美化編輯器。

類似的 Extension：
- VSCode Great Icons
- Studio Icons
- Studio Icons - Visual Studio Marketplace

Dracula（主題）

我喜歡的一個主題。