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