Visual Studio Code 是由微軟開發的一款免費、跨平臺的文字編輯器。由於其卓越的效能和豐富的功能，它很快就受到了大家的喜愛。
就像大多數 IDE 一樣，VSCode 也有一個擴充套件和主題市場，包含了數以千計質量不同的外掛。為了幫助大家挑選出值得下載的外掛，我們針對性的收集了一些實用、有趣的外掛與大家分享。
1. Open-In-Browser
由於 VSCode 沒有提供直接在瀏覽器中開啟檔案的內建介面，所以此外掛在快捷選單中新增了在預設瀏覽器檢視檔案選項，以及在客戶端（Firefox，Chrome，IE）中開啟命令皮膚選項。
外掛地址：
https://marketplace.visualstudio.com/items?itemName=coderfee.open-html-in-browser
2. Quokka
Quokka 是一個除錯工具外掛，能夠根據你正在編寫的程式碼提供實時反饋。它易於配置，並能夠預覽變數的函式和計算值結果。另外，在使用 JSX 或 TypeScript 專案中，它能夠開箱即用。
外掛地址：https://quokkajs.com/
3. Faker
使用流行的 JavaScript 庫 – Faker，能夠幫你快速的插入用例資料。Faker 可以隨機生成姓名、地址、影像、電話號碼，或者經典的亂數假文段落，並且每個類別還包含了各種子類別，你可以根據自身的需求來使用這些資料。
外掛地址：
https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker
4. CSS Peek
使用此外掛，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 檔案中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你傳送樣式設定的 CSS 程式碼。
外掛地址：
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
5. HTML Boilerplate
通過使用 HTML 模版外掛，你就擺脫了為 HTML 新檔案重新編寫頭部和正文標籤的苦惱。你只需在空檔案中輸入 html，並按 Tab 鍵，即可生成乾淨的文件結構。
外掛地址：
https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate
6. Prettier
Prettier 是目前 Web 開發中最受歡迎的程式碼格式化程式。安裝了這個外掛，它就能夠自動應用 Prettier，並將整個 JS 和 CSS 文件快速格式化為統一的程式碼樣式。如果你還想使用 ESLint，那麼還有個 Prettier – Eslint 外掛，你可不要錯過咯！
外掛地址：
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
7. Color Info
這個便捷的外掛，將為你提供你在 CSS 中使用顏色的相關資訊。你只需在顏色上懸停游標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關資訊了。
外掛地址：
https://marketplace.visualstudio.com/items?itemName=bierner.color-info
8. SVG Viewer
此外掛在 Visual Studio 程式碼中新增了許多實用的 SVG 程式，你無需離開編輯器，便可以開啟 SVG 檔案並檢視它們。同時，它還包含了用於轉換為 PNG 格式和生成資料 URI 模式的選項。
外掛地址：
https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer
9. TODO Highlight
這個外掛能夠在你的程式碼中標記出所有的 TODO 註釋，以便更容易追蹤任何未完成的業務。在預設的情況下，它會查詢 TODO 和 FIXME 關鍵字。當然，你也可以新增自定義表示式。
外掛地址：
https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
10. Icon Fonts
這是一個能夠在專案中新增圖示字型的外掛。該外掛支援超過 20 個熱門的圖示集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
外掛地址：
https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts
11. Minify
這是一款用於壓縮合並 JavaScript 和 CSS 檔案的應用程式。它提供了大量自定義的設定，以及自動壓縮儲存並匯出為.min檔案的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工作。
外掛地址：
https://marketplace.visualstudio.com/items?itemName=HookyQR.minify
12. Change Case
雖然 VSCode 內建了開箱即用的文字轉換選項，但其只能進行文字大小寫的轉換。而此外掛則新增了用於修改文字的更多命名格式，包括駝峰命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等。
外掛地址：
https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case
13. Regex Previewer
這是一個用於實時測試正規表示式的實用工具。它可以將正規表示式模式應用在任何開啟的檔案上，並高亮所有的匹配項。
外掛地址：
https://marketplace.visualstudio.com/items?itemName=chrmarti.regex
14. Language and Framework Packs
VSCode 預設支援大量的主流程式語言，但如果你所使用的程式語言不包括在內，也可以通過下載擴充套件包來自動新增。同時，你還可以新增一些像 React Native 與Vue 的相關 Web 開發外掛包。
外掛地址：
https://marketplace.visualstudio.com/search?target=VSCode&category=Languages&sortBy=Downloads
15. Themes
當然，在眾多的實用外掛中，豈能少了漂亮的主題呢？你每天都會與你的 VSCode 編輯器進行“親密的接觸”，為何不把它打扮得更漂亮些呢？這裡有一些幫助你更改側邊欄的配色方案，以及圖示的相關主題，與大家分享：
• One Monokai
• Aglia
• One Dark
• Material Icon
轉載：https://blog.csdn.net/qq_38906523/article/details/77278403