VSCode必備外掛推薦

小賢筆記發表於2018-08-12
VSCode
外掛 說明 備註
Auto Close Tag 自動新增HTML / XML關閉標籤
Auto Rename Tag 自動重新命名配對的HTML / XML標籤
Beautify 格式化程式碼
Bracket Pair Colorizer 顏色識別匹配括號
Code Runner 非常強大的一款外掛，能夠執行多種語言的程式碼片段或程式碼檔案：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等
安裝完成後，右上角會出現：▶
change-case 雖然 VSCode 內建了開箱即用的文字轉換選項，但其只能進行文字大小寫的轉換。而此外掛則新增了用於修改文字的更多命名格式，包括駝峰命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等
Chinese (Simplified) Language Pack for Visual Studio Code 中文簡體語言包
Color Info 這個便捷的外掛，將為你提供你在 CSS 中使用顏色的相關資訊。你只需在顏色上懸停游標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關資訊了
CSS Peek 使用此外掛，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 檔案中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你傳送樣式設定的 CSS 程式碼
Debugger for Chrome 前端除錯, 檢視使用方法
ESLint EsLint可以幫助我們檢查Javascript程式設計時的語法錯誤。比如：在Javascript應用中，你很難找到你漏洩的變數或者方法。EsLint能夠幫助我們分析JS程式碼，找到bug並確保一定程度的JS語法書寫的正確性
filesize 在底部狀態列顯示當前檔案大小，點選後還可以看到詳細建立、修改時間
Git History 以圖表的形式檢視 git 日誌
GitLens — Git supercharged 顯示檔案最近的 commit 和作者，顯示當前行 commit 資訊
HTML Boilerplate 通過使用 HTML 模版外掛，你就擺脫了為 HTML 新檔案重新編寫頭部和正文標籤的苦惱。你只需在空檔案中輸入 html，並按 Tab 鍵，即可生成乾淨的文件結構
HTML CSS Support html 程式碼自動補全以及 class 智慧提示
HTMLHint HTML 程式碼格式檢測
HTML Snippets 程式碼自動填充
htmltagwrap 在選中HTML標籤中外面套一層標籤
“Alt + W” (“Option + W” for Mac)
Image Preview 滑鼠移到路徑裡顯示影像預覽
Indenticator 突出目前的縮排深度
intelliSense for CSS class names in HTML 把專案中 css 檔案裡的名稱智慧提示在 html 中
JavaScript (ES6) code snippets es6程式碼片段
Live Server 瀏覽器實時重新整理
Node.js Modules Intellisense 可以在匯入語句中自動完成JavaScript / TypeScript模組
npm Intellisense require 時的包提示
Path Intellisense 路徑自動補全
Quokka.js Quokka 是一個除錯工具外掛，能夠根據你正在編寫的程式碼提供實時反饋
使用方法: ctrl+shift+p 輸入 quokka 選擇 new javascript 就可以了
Regex Previewer 這是一個用於實時測試正規表示式的實用工具。它可以將正規表示式模式應用在任何開啟的檔案上，並高亮所有的匹配項
SVG Viewer 此外掛在 Visual Studio 程式碼中新增了許多實用的 SVG 程式，你無需離開編輯器，便可以開啟 SVG 檔案並檢視它們。同時，它還包含了用於轉換為 PNG 格式和生成資料 URI 模式的選項
Vetur Vue 語法高亮顯示, 語法錯誤檢查, 程式碼自動補全
(配合 ESLint 外掛效果更佳)
vscode-fileheader 頂部註釋模板，可定義作者、時間等資訊，並會自動更新最後修改時間
快捷鍵: Ctrl+Alt+i
(預設資訊可在 檔案→首選項→設定 中修改)


相關文章