原文地址：http://www.css88.com/archives/8064
小編推薦：掘金是一個面向程序員的高質量技術社區，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術干貨。
Visual Studio Code 是由微軟開發的一款免費的，跨平台文本編輯器。由於其出色的性能表現和豐富的功能，它很快成為了開發者的最愛。
與大多數 IDE 一樣，VSCode 也有一個擴展市場，包含數千個具有不同功能的插件。為了幫助您挑選值得下載的東西，我們收集了這些最有用和最有趣的擴展。
在瀏覽器中打開或預覽 – Open-In-Browser
VSCode 不能通過內置界面來直接在瀏覽器中打開文件。此擴展將添加一個 [Open With Default Browser] 選項到右鍵菜單，使您在客戶端（Firefox，Chrome，IE）中打開命令面板選項。
項目地址：Open-In-Browser
代碼調試 – Quokka
Quokka 是一個調試工具，可以為您正在編寫的代碼提供實時反饋。它能夠預覽變量的函數和計算值結果。該擴展易於配置，對於使用 JSX 或 TypeScript 的項目可直接使用。
項目地址：Quokka
Faker
使用流行的 Faker JavaScript 庫快速插入占位符數據。您可以生成隨機的名稱，地址，圖像，電話號碼或經典的亂數假文段落。每個類別都有各種子類別，因此您可以隨心所欲的使用這些數據。
項目地址：Faker
跳轉到 CSS 定義行 – CSS Peek
通過此擴展，您可以跟蹤樣式表中 CSS 類和 id 的樣式。當您右鍵單擊 HTML 文件中的選擇器時，選擇“Go to Definition”和“Peek”將會直接帶您跳轉到相對應的 CSS 代碼。
項目地址：CSS Peek
HTML 模板 – HTML Boilerplate
HTML 模板擴展將不必手動寫入新的 HTML 文檔的 head 和 body 標簽。只需在空文件中輸入 html ，按 Tab 鍵即可生成干凈的文檔結構。
項目地址：HTML Boilerplate
格式化代碼 代碼美化 – Prettier
Prettier 是現在 Web 開發中最流行的代碼格式化程序。它允許您的團隊保持整齊統一的代碼結構。此擴展可以自動應用 Prettier 並快速格式化整個 JS 和 CSS 文檔。
項目地址：Prettier
顏色信息及轉換 – Color Info
一個輕量級的小插件，將為你提供有關 CSS 中使用的顏色的各種信息。通過將鼠標懸停在顏色代碼處，就可以看到顏色的預覽，以及有關其轉換為所有格式（hex，rgb，hsl和cmyk）的信息。
項目地址：Color Info
SVG 預覽 – SVG Viewer
此插件是一款可以在 Visual Studio Code 中查看 SVG 的實用程序。它可以渲染 SVG 文件，查看預覽而無需離開編輯器。同時，它還包含了用於轉換為 PNG 格式和生成數據 URI 模式的選項。
項目地址：SVG Viewer
TODO 高亮 – TODO Highlight
此工具可以在你的代碼中的標記出所有的 TODO 注釋，以便在推送到生產環境之前輕松跟蹤任何未完成的業務。默認情況下，它會查找 TODO 和 FIXME 關鍵字，當然，您也可以添加自定義表達式。
項目地址：TODO Highlight
圖標字體 – Icon Fonts
這是一個能夠在您的項目（或從CDN）中添加圖標字體的插件，並且自動對圖標本身的類名進行提示。該擴展支持超過20個流行的圖標集，包括 Font Awesome ，Ionicons ， Glyphicons 和 Material Design Icons 。
項目地址：Icon Fonts
代碼壓縮 – Minify
用於壓縮代碼的擴展。它提供了大量的自定義設置和自動壓縮保存並導出到 .min 文件的選項。 Minify 分別通過 uglify-js ，clean-css 和 html-minifier 對 JavaScript ，CSS 和 HTML 進行壓縮。
項目地址：Minify
命名格式轉換 – Change Case
此插件用來轉換文本。可直接使用，只能進行小寫和大寫轉換。此插件添加了更多用於修改字符串的命令，包括 camelCase（駱駝拼命名），kebab-case（中划線命名），snake_case（下划線命名）， CONST_CASE（大寫命名）等。
項目地址：Change Case
正則表達式預覽 – Regex Previewer
用於實時測試正則表達式的實用工具。它通過將正則表達式模式應用於任何打開的文本文件，突出顯示所有匹配項。
項目地址：Regex Previewer
語言和框架 – Language and Framework Packs
VSCode 支持大量語言。如果您使用的編程語言不包括在內，那么您可以下載這個擴展包，它將添加自動填充，適當的縮進和其他實用功能。還有對 Web 前端框架，如 react native 和 vue 的語言包支持。
主題及配色方案 – Themes
當然，所有擴展中最重要的是主題。你每天都在看你的 VSCode 編輯器，為什么不讓它變得更漂亮呢？有許多定制插件可以改變顏色方案和側邊欄中的圖標。以下是我們的一些最愛：