[轉]vscode 插件推薦 - 獻給全部前端工程師（2019.8.7更新）

原文地址:https://segmentfault.com/a/1190000006697219

VScode如今已經愈來愈完善。性能遠超Atom和webstorm,你有什麼理由不用它?
在這裏，我會給大家推薦不少實用的插件，讓你對 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已經原生支持,在function上輸入/** tab）

ESlint

ESlint 接管原生 js 提示，能夠自定製提示規則。這個比較高玩，不會的就算了，
詳情配置請看個人另外一篇文章 https://segmentfault.com/a/11...

HTMLHint

html代碼檢測

Project Manager

在多個項目以前快速切換的工具

beautify

格式化代碼的工具

Bootstrap 3 Sinnpet

經常使用 bootstrap 的能夠下

Atuo Rename Tag

修改 html 標籤，自動幫你完成尾部閉合標籤的同步修改，不過有些bug。

GitLens

豐富的git日誌插件

fileheader

頂部註釋模板，可定義做者、時間等信息，並會自動更新最後修改時間

filesize

在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間

Bracket Pair Colorizer

讓括號擁有獨立的顏色，易於區分。能夠配合任意主題使用。

Vue插件

如下推薦vue框架所需的插件

vetur

語法高亮、智能感知、Emmet等

VueHelper

snippet代碼片斷

Import Cost

引入包大小計算,對於項目打包後體積掌握頗有幫助

主題

Material

冷門、好看、實用。此主題已停更許久

Dracula

目前我以爲是vscode上最漂亮的主題,vscode 1.11+容許自定義statusBar等全局ui後,該主題也跟進改了不少小細節,良心!~

One Dark Pro

源於Atom,老版本的Atom One Dark主題能夠扔了.

最近有坑的組件，千萬不要更新

Image Preview

代碼中有圖片地址時，會實時閱覽圖片的功能，最近更新0.21.0版本會拖慢整個vscode，甚至代碼提示都卡住彈不出來了。
因此趕忙卸載或者禁用整個插件吧。等後續做者更新再看看.
github反饋 https://github.com/kisstkondo...

對前端感興趣的小夥伴，能夠關注我一塊兒討論哦！
GitHub https://github.com/Moerj