通用外掛

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已經原生支援）

ESlint

ESlint 接管原生 js 提示，可以自定製提示規則。這個比較高玩，不會的就算了，我之前發過一篇文章 sublime 配置 Atom js 語法校驗中有提到，他們的配置檔案是通用的。

HTMLHint

html程式碼檢測

Project Manager

在多個專案之前快速切換的工具

beautify

格式化程式碼的工具

Bootstrap 3 Sinnpet

常用 bootstrap 的可以下

Atuo Rename Tag

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

GitLens

豐富的git日誌外掛

fileheader

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

filesize

在底部狀態列顯示當前檔案大小，點選後還可以看到詳細建立、修改時間

Bracket Pair Colorizer

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

 

Quokka

使用：先shift+cmd+p （ctrl+shift+p）輸入 quokka 選擇 new javascript 就行了

Quokka 是一個除錯工具外掛，能夠根據你正在編寫的程式碼提供實時反饋。它易於配置，並能夠預覽變數的函式和計算值結果。另外，在使用 JSX 或 TypeScript 專案中，它能夠開箱即用。

/*?*/在某個表示式之後（或//?在語句之後）插入特殊註釋將僅記錄該表示式的值。

例如，

a.b()/*?*/.c().d()

將輸出a.b()表示式的結果，和

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

將輸出完整a.b().c().d()表示式的結果。

/*?.*/ 在任何表示式之後插入特殊註釋將報告執行表示式所花費的時間。

a() //?. $    顯示a()執行時間和結果。

 

外掛地址：https://quokkajs.com/

CSS Peek

使用此外掛，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 檔案中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你傳送樣式設定的 CSS 程式碼。

外掛地址：

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

HTML Boilerplate

通過使用 HTML 模版外掛，你就擺脫了為 HTML 新檔案重新編寫頭部和正文標籤的苦惱。你只需在空檔案中輸入 html，並按 Tab 鍵，即可生成乾淨的文件結構。

外掛地址：

https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate

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

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

Dracula

目前我覺得是vscode上最漂亮的主題,vscode 1.11+允許自定義statusBar等全域性ui後,該主題也跟進改了很多小細節,良心!~

One Dark Pro

源於Atom,老版本的Atom One Dark主題可以扔了.

Themes

當然，在眾多的實用外掛中，豈能少了漂亮的主題呢？你每天都會與你的 VSCode 編輯器進行“親密的接觸”，為何不把它打扮得更漂亮些呢？這裡有一些幫助你更改側邊欄的配色方案，以及圖示的相關主題，與大家分享：

• One Monokai

• Aglia

• One Dark

• Material Icon

沒有一款字型能夠讓所有人都喜歡。但是，總有一款字型能夠讓你滿意。在等寬字型中，我推薦五款我覺得十分養眼的給大家，希望你們也喜歡。

1、Source Code Pro

這款來自Adobe的開源字型，是我的最愛。

Source Code Pro

2、Menlo

Menlo

3、Consolas

Consolas

4、Monaco

 

5、Courier New

 

 

轉自https://www.cnblogs.com/vivaxiaonan/p/7380099.html