Visual Studio Code插件整理

開發

文件大小

filesize

顯示當前文件大小
插件地址：傳送門

字符轉換

String Manipulation

字符串轉換處理（駝峯、大寫開頭、下劃線等等）
插件地址：傳送門

代碼比對

Partial Diff

對比兩段代碼或文件
插件地址：傳送門

代碼閱讀體驗優化

Guides

高亮縮進基準線
插件地址：傳送門

Indenticator

縮進高亮
插件地址：傳送門

Bracket Pair Colorizer

讓括號擁有獨立的顏色，易於區分。能夠配合任意主題使用。
插件地址：傳送門

文件定位

File Peek

根據路徑字符串，快速定位到文件
插件地址：傳送門

書籤

Bookmarks

添加行書籤

註釋

fileheader

頂部註釋模板，可定義做者、時間等信息，並會自動更新最後修改時間
插件地址：傳送門

自動完成

Path Autocomplete

路徑完成提示
插件地址：傳送門

Path Intellisense

自動路勁補全，默認不帶這個功能的，趕忙裝
插件地址：傳送門

PHP IntelliSense

插件地址：傳送門

For PHP

composer

PHP 包管理工具
插件地址：傳送門

Git

GitLens

豐富的git日誌插件
插件地址：傳送門

Git History

查看git log
插件地址：傳送門

前端開發

自動完成

Atuo Rename Tag

修改 html 標籤，自動幫你完成尾部閉合標籤的同步修改，不過有些bug。
插件地址：傳送門

Auto Close Tag

自動閉合html標籤
插件地址：傳送門

代碼提示

HTML Snippets

超級實用且初級的 H5代碼片斷以及提示
插件地址：傳送門

HTML CSS Support

讓 html 標籤上寫class 智能提示當前項目所支持的樣式
插件地址：傳送門

Icon Fonts

這是一個可以在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
插件地址：傳送門

Color Info

這個便捷的插件，將爲你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就能夠預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。
插件地址：傳送門

jQuery Code Snippets

jquery 重度患者必須品
插件地址：傳送門

Bootstrap 3 Sinnpet

Bootstrap前端框架代碼提示
插件地址：傳送門

代碼審查

ESlint

ESLint 是一個代碼規範和錯誤檢查工具
插件地址：傳送門

HTMLHint

html代碼檢測
插件地址：傳送門

caniuse

HTML五、CSS三、SVG的瀏覽器兼容性檢查
插件地址：傳送門

模版

HTML Boilerplate

經過使用 HTML 模版插件，你就擺脫了爲 HTML 新文件從新編寫頭部和正文標籤的苦惱。你只需在空文件中輸入 html，並按 Tab 鍵，便可生成乾淨的文檔結構。
插件地址：傳送門

格式化

beautify

格式化代碼工具，支持javascript, JSON, CSS, Sass, and HTML
插件地址：傳送門

Prettier

Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就可以自動應用 Prettier，並將整個 JS 和 CSS 文檔快速格式化爲統一的代碼樣式。若是你還想使用 ESLint，那麼還有個 Prettier – Eslint 插件，你可不要錯過咯！
插件地址：傳送門

代碼定位

CSS Peek

使用此插件，你能夠追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇「 Go to Definition 和 Peek definition 」選項，它便會給你發送樣式設置的 CSS 代碼。
插件地址：傳送門

正則表達式

Regex Previewer

這是一個用於實時測試正則表達式的實用工具。它能夠將正則表達式模式應用在任何打開的文件上，並高亮全部的匹配項。
插件地址：傳送門

代碼壓縮

Minify

這是一款用於壓縮合並 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存並導出爲.min文件的選項。它可以分別經過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工做。
插件地址：傳送門

調試

Debugger for Chrome

讓 vscode 映射 chrome 的 debug功能，靜態頁面均可以用 vscode 來打斷點調試，真666~
插件地址：傳送門

Quokka

Quokka 是一個調試工具插件，可以根據你正在編寫的代碼提供實時反饋。它易於配置，並可以預覽變量的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它可以開箱即用。
插件地址：傳送門

Vue插件

代碼提示

vetur

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

VueHelper

snippet代碼片斷

其餘

Faker

使用流行的 JavaScript 庫 – Faker，可以幫你快速的插入用例數據。Faker 能夠隨機生成姓名、地址、圖像、電話號碼，或者經典的亂數假文段落，而且每一個類別還包含了各類子類別，你能夠根據自身的需求來使用這些數據。
插件地址：傳送門

SVG Viewer

此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，即可以打開 SVG 文件並查看它們。同時，它還包含了用於轉換爲 PNG 格式和生成數據 URI 模式的選項。
插件地址：傳送門

TODO Highlight

這個插件可以在你的代碼中標記出全部的 TODO 註釋，以便更容易追蹤任何未完成的業務。在默認的狀況下，它會查找 TODO 和 FIXME 關鍵字。固然，你也能夠添加自定義表達式。
插件地址：傳送門