10.【轉】Visual Studio Code 必備外掛程式，主題及文法提示

標籤：new   net   market   ems   uri   hoc   調試   名稱   一個   

原文地址：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預覽 – Regex Previewer

用於即時測試Regex的工具 + 生產力。它通過將Regex模式應用於任何開啟的文字檔，反白所有匹配項。

項目地址：Regex Previewer

語言和架構 – Language and Framework Packs

VSCode 支援大量語言。如果您使用的程式設計語言不包括在內，那麼您可以下載這個擴充包，它將添加自動填滿，適當的縮排和其他實用功能。還有對 Web 前端架構，如 react native 和 vue 的語言套件支援。

主題及色彩配置 – Themes

當然，所有擴充中最重要的是主題。你每天都在看你的 VSCode 編輯器，為什麼不讓它變得更漂亮呢？有許多定製外掛程式可以改變顏色方案和側邊欄中的表徵圖。以下是我們的一些最愛：

• One Monokai
• Aglia
• One Dark
• Material Icon

10.【轉】Visual Studio Code 必備外掛程式，主題及文法提示