本篇文章給大家分享一些提高前端開發效率的vscode必備插件。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
【推薦學習：《vscode》】
vscode前端必備插件-提高開發效率
1、auto Close Tag
立即學習“前端免費學習筆記（深入）”；
2、Auto Rename Tag
自動完成另一側標簽的同步修改
?
3、Beautify
格式化代碼，值得注意的是，beautify插件支持自定義格式化代碼規則
4、Bracket Pair Colorizer
給括號加上不同的顏色，便于區分不同的區塊，使用者可以定義不同括號類型和不同顏色
映射vscode上的斷點到chrome上，方便調試
?6、Courier New
一款好看字體
7、gitLens
方便查看git日志，git重度使用者必備
?8、HTML css Support
智能提示CSS類名以及id
?9、HTML Snippets
智能提示HTML標簽，以及標簽含義
?10、JavaScript(es6) code snippets
ES6語法智能提示，以及快速輸入，不僅僅支持.JS，還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各種包含js代碼文件的時間
?11、jquery Code Snippets
jQuery代碼智能提示
?12、Markdown Preview Enhanced
實時預覽markdown，markdown使用者必備
?13、markdownlint
markdown語法糾錯
?14、Material Icon Theme
個人認為最好的vscode圖標主題，支持更換不同色系的圖標，值得點出的是，該插件更新極其頻繁，基本和vscode更新頻率保持一致
?15、open in browser
vscode不像ide一樣能夠直接在瀏覽器中打開html，而該插件支持快捷鍵與鼠標右鍵快速在瀏覽器中打開html文件，支持自定義打開指定的瀏覽器，包括：firefox，Chrome，Opera，IE以及safari
?16、Path Intellisense
自動提示文件路徑，支持各種快速引入文件
?17、React/Redux/react-router Snippets
React/Redux/react-router語法智能提示
?18、Vetur
Vue多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。vscode官方欽定Vue插件，Vue開發者必備。
?19、vscode-icon
讓 vscode 資源樹目錄加
?20、HTMLHint
html代碼檢測
21、Project Manager
在多個項目之前快速切換的工具
22、fileheader
頂部注釋模板，可定義作者、時間等信息，并會自動更新最后修改時間，快捷鍵ctrl+alt+i在文件開頭自動輸入作者信息和修改信息等內容
?23、filesize
在底部狀態欄顯示當前文件大小，點擊后還可以看到詳細創建、修改時間
?24、quokka
一個調試工具插件，能夠根據你正在編寫的代碼提供實時反饋。它易于配置，并能夠預覽變量的函數和計算值結果。另外，在使用 JSX 或 typescript 項目中，它能夠開箱即用
?25、CSS Peek
使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼。
?26、HTML Boilerplate
通過使用 HTML 模版插件，你就擺脫了為 HTML 新文件重新編寫頭部和正文標簽的苦惱。你只需在空文件中輸入 html，并按 Tab 鍵，即可生成干凈的文檔結構。
?27、Prettier
Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用Prettier，并將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。如果你還想使用 ESLint，那么還有個 Prettier – Eslint 插件，你可不要錯過咯！
?28、Color Info
提供你在 CSS中使用顏色的相關信息。你只需在顏色上懸停光標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。
?29、Icon Fonts
這是一個能夠在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons
?30、Minify
這是一款用于壓縮合并 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存并導出為.min文件的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工作。使用F1 運行文件縮小器Minify
?31、VueHelper
snippet代碼片段
?32、Vue 2 Snippets
33、Vue VSCode Snippets
VUE代碼自動補全插件
34、Git history
git提交歷史
35、Setting Sync
同步你得設置和插件
36、reactjs code snippets
一個 React 自動補工具。
37、Terminal?
vs code 內置的命令行插件，也比較實用。
38、npm Intellisense
用于在import語句中自動填充npm模塊。
39、npm
此擴展支持運行文件中定義的npm腳本，package.json并根據中定義的依賴項驗證已安裝的模塊package.json。
40、Window Colors
每個VSCode窗口都可以獨特地自動著色。
41、live server 插件
開啟本地服務器
42、Comment Translate
翻譯插件，選中文字即可翻譯
43、Tiny Light
米色護眼主題，類似于Hbuild
?
更多編程相關知識，請訪問：vscode！！
