Visual Studio Code 是由微軟開發的一款免費的，跨平臺文本編輯器。因爲其出色的性能表現和豐富的功能，它很快成爲了開發者的最愛。前端
與大多數 IDE 同樣，VSCode 也有一個擴展市場，包含數千個具備不一樣功能的插件。爲了幫助您挑選值得下載的東西，咱們收集了這些最有用和最有趣的擴展。
vue
在瀏覽器中打開或預覽 – Open-In-Browser
VSCode 不能經過內置界面來直接在瀏覽器中打開文件。此擴展將添加一個 [Open With Default Browser] 選項到右鍵菜單，使您在客戶端（Firefox，Chrome，IE）中打開命令面板選項。html5
項目地址：Open-In-Browserreact
代碼調試 – Quokka
Quokka 是一個調試工具，能夠爲您正在編寫的代碼提供實時反饋。它可以預覽變量的函數和計算值結果。該擴展易於配置，對於使用 JSX 或 TypeScript 的項目可直接使用。git
項目地址：Quokka程序員
Faker
使用流行的 Faker JavaScript 庫快速插入佔位符數據。您能夠生成隨機的名稱，地址，圖像，電話號碼或經典的亂數假文段落。每一個類別都有各類子類別，所以您能夠爲所欲爲的使用這些數據。github
項目地址：Fakerweb
跳轉到 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 編輯器，爲何不讓它變得更漂亮呢？有許多定製插件能夠改變顏色方案和側邊欄中的圖標。如下是咱們的一些最愛：