工欲善其事，必先利其器。在這里，我會給你推薦很多實用的插件，讓你對 vscode 有更深刻的體會，漸漸地你就會知道它有多好用。
走馬觀花前，請先將你的 vscode 更新到最新版本。
通用插件
HTML Snippets
超級實用且初級的 H5代碼片段以及提示
HTML CSS Support
讓 html 標簽上寫class 智能提示當前項目所支持的樣式。新版已經支持scss文件檢索
Debugger for Chrome
讓 vscode 映射 chrome 的 debug功能，靜態頁面都可以用 vscode 來打斷點調試，真666~
配置稍微復雜一些，哪天心情好我再另寫教程吧~
jQuery Code Snippets
jquery 重度患者必須品，廢話不多說，上圖
vscode-icon
讓 vscode 資源樹目錄加上圖標，必備良品！
Path Intellisense
自動路勁補全，默認不帶這個功能的，趕緊裝
Npm Intellisense
require 時的包提示（最新版的vscode已經集成此功能）
Document this
js 的注釋模板 （注意：最新版的vscode已經原生支持）
HTMLHint
html代碼檢測
Project Manager
在多個項目之前快速切換的工具
beautify
格式化代碼的工具
Bootstrap 3 Sinnpet
常用 bootstrap 的可以下
Atuo Rename Tag
修改 html 標簽，自動幫你完成尾部閉合標簽的同步修改，不過有些bug
GitLens
豐富的git日志插件
fileheader
頂部注釋模板，可定義作者、時間等信息，并會自動更新最后修改時間
filesize
在底部狀態欄顯示當前文件大小，點擊后還可以看到詳細創建、修改時間
Bracket Pair Colorizer
讓括號擁有獨立的顏色，易于區分。可以配合任意主題使用。
CSS Peek
使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼。
插件地址：
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
Prettier
Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用 Prettier，并將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。如果你還想使用 ESLint，那么還有個 Prettier – Eslint 插件，你可不要錯過咯！
插件地址：
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Color Info
這個便捷的插件，將為你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。
插件地址：
https://marketplace.visualstudio.com/items?itemName=bierner.color-info
Icon Fonts
這是一個能夠在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
插件地址：
https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts
Minify
這是一款用于壓縮合并 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存并導出為.min文件的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工作。
使用F1 運行文件縮小器Minify
插件地址：
https://marketplace.visualstudio.com/items?itemName=HookyQR.minify
Vue插件
以下推薦vue框架所需的插件
vetur
語法高亮、智能感知、Emmet等
VueHelper
snippet代碼片段
主題
Material
冷門、好看、實用。此主題已停更許久
