10.【轉】Visual Studio Code 必備外掛，主題及語法提示
原文地址：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 編輯器，為什麼不讓它變得更漂亮呢？有許多定製外掛可以改變顏色方案和側邊欄中的圖示。以下是我們的一些最愛：