VS Code 必備插件推薦

插件	說明	備注
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 (預設資訊可在 檔案→首選項→設定 中修改)