前端開發者必備的40個VSCode插件！
前言：俗話說「君欲善其事，必先利其器。」筆者也使用VScode開發有一段時間了，不得不說，VSCode是我目前用到的眾多開發工具中最好使用的一款。當然這些功能大多得歸功於VSCode的插件生態系統，筆者經過這麼長一段時間的開發，也安裝了不少關於前端方面插件，參考網上大牛們的文章，整理出了如下插件（排名不分先後！）。由於插件過多，加上繁雜，筆者就沒有一一分類，建議收藏下來慢慢看。
學習更多內容歡迎參考我的其他文章：
天之藍源：三分鐘在GitHub上搭建個人博客
天之藍源：零基礎Hexo+Github搭建靜態個人博客
天之藍源：原生js實現點擊按鈕複製文本內容
天之藍源：九種跨域方式實現原理
天之藍源：前端面試考點多？看這些文章就夠了（轉載）
天之藍源：乾貨！值得收藏的前端學習網站
天之藍源：原生JS實現一個日期選擇器（DatePicker）組件
天之藍源：原生js一步一步實現《別踩白塊兒》小遊戲
天之藍源：原生js利用localstorage實現簡易TODO list應用
天之藍源：原生js實現瀑布流效果
天之藍源：原生js實現圖片懶載入（lazyLoad）
天之藍源：原生js實現簡單路由切換
進入正題！
1.HTML Snippets
超級實用且初級的 H5代碼片段以及提示
2.HTML CSS Support
讓 html 標籤上寫class 智能提示當前項目所支持的樣式
3.Debugger for Chrome
讓 vscode 映射 chrome 的 debug功能，靜態頁面都可以用 vscode 來打斷點調試
https://github.com/Microsoft/vscode-chrome-debug/blob/master/images/demo.gif?raw=true
4.jQuery Code Snippets
超過130個用於JavaScript代碼的jQuery代碼片段。只需鍵入字母jq即可獲得所有可用jQuery代碼片段的列表。
5.vscode-icons
讓 vscode 資源樹目錄加上圖標
vscode-icons/vscode-icons
6.Path Intellisense
自動路徑補全
7.Document this
「Document This」是Visual Studio代碼擴展，它自動為TypeScript和JavaScript文件生成詳細的JSDoc注釋。
8.ESlint
JavaScript代碼檢測, JavaScript代碼風格檢測, JavaScript代碼自動格式化.
9.HTMLHint
html代碼檢測
10.Project Manager
在多個項目之前快速切換的工具
11.beautify
格式化代碼的工具
12.Bootstrap 3 Sinnpet
常用 bootstrap 的可以下
13.Atuo Rename Tag
修改 html 標籤，自動幫你完成尾部閉合標籤的同步修改
formulahendry/vscode-auto-rename-tag
14.GitLens
豐富的git日誌插件
15.fileheader
頂部注釋模板，可定義作者、時間等信息，並會自動更新最後修改時間
16.Bracket Pair Colorizer
讓括弧擁有獨立的顏色，易於區分。可以配合任意主題使用。
17.Class autocomplete for HTMLaessoft
擴展自動掃描一個活動的HTML文件的外部CSS樣式錶鏈接。當找到樣式表時，類名被提取出來，並與Visual Studio代碼的代碼完成特性一起使用。
18.Code Runner
能夠運行多種語言的代碼片段或代碼文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等
19.css peek
能夠查看CSS ID和類的字元串作為HTML文件中相應的CSS定義
20.Font-awesome codes for html
用於 html 的Font-awesome代碼片段
21.filesize
在底部狀態欄顯示當前文件大小，點擊後還可以看到詳細創建、修改時間
22.Git History
以圖表的形式查看git日誌
DonJayamanne/gitHistoryVSCode
23.htmltagwrap
可以在選中HTML標籤中外面套一層標籤
24.Indenticator
突出目前的縮進深度
25.IntelliSense for CSS class names
智能提示 css 的 class 名
26.Image Preview
滑鼠移到路徑里顯示圖像預覽
27.JavaScript (ES6) code snippets
es6代碼片段
28.Live Sass Compiler
實時編譯 sass
29.markdownlint
markdown 語法檢查
30.open in browser
當前的 html 文件用瀏覽器打開，類似 webstorm 的那四個小瀏覽器圖標功能，前提條件html 文件必須保
31.Quokka.js
wallabyjs/quokka
實時觀看 javascript 的變數的變化
32.TSLint
測試正則的插件
Microsoft/vscode-typescript-tslint-plugin
33.vetur
語法高亮、智能感知
Vetur | Vetur
34.VueHelper
vue代碼片段
OYsun/vscode-VueHelper
35.Dracula Official
主題風格
36.One Dark Pro
代碼主題
37. Color Info
提供你在 CSS 中使用顏色的相關信息
38.SVG Viewer
無需離開編輯器，便可以打開 SVG 文件並查看它們
39.TODO Highlight
能夠在你的代碼中標記出所有的 TODO 注釋，以便更容易追蹤任何未完成的業務
40.Minify
用於壓縮合併 JavaScript 和 CSS 文件的應用程序
到此我所了解到的vscode插件基本都在這裡了，更多內容可以參考我的其他文章！
歡迎關注微信公眾號：前端切圖仔
推薦閱讀：
