vscode 前端好用插件彙總

本篇文章根據實際開發中使用的擴展插件，結合《精選！15 個必備的 VSCode 插件（前端類）》、《vscode 插件推薦 - 獻給全部前端工程師（2017.8.18更新）》中的介紹進行編輯。

HTML相關：

HTML Boilerplate：

經過使用 HTML 模版插件，你就擺脫了爲 HTML 新文件從新編寫頭部和正文標籤的苦惱。你只需在空文件中輸入 html，並按 tab 鍵，便可生成乾淨的文檔結構。也能夠輸入！，而後按tab鍵或者enter鍵來生成初始乾淨的文檔結構。

HTML Snippets：

超級實用且初級的 H5代碼片斷以及提示。

HTML CSS Support：

讓 html 標籤上寫class 智能提示當前項目所支持的樣式。

 

Path Intellisense：

自動路勁補全

Atuo Rename Tag：

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

Auto Close Tag:

自動關閉標籤

highlight-matching-tag：

高亮當前所在標籤的開始和結束爲位置。

HTML Boilerplate：

HTML模板，輸入HTML在下拉列表中能夠選擇對應的模板來新建HTML文件。

HTML CSS Support：

在HTML文檔中提供對css代碼的支持。

htmltagwrap：

按着快捷鍵ALT+W能夠實現給代碼塊加父標籤。

IntelliSense for CSS class names：

樣式名提示

 

CSS相關:

CSS Peek：

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

CSScomb:

支持語言
1.CSS, Less, Sass, SCSS
2.Styles inside  or  tags: HTML, Vue

<style><style lang="LANGUAGE">

Sass:

高亮scss並支持語法補全

 

 

JS相關:

 

Babel ES6/ES7:

將ES6和ES7的代碼轉化成ES5的。

 

JavaScript (ES6) snippets:

JS 代碼片斷

文件相關:

自動補全

Document this：

js 的註釋模板

fileheader：

同vscode-fileheader

 

 

vscode-fileheader：

 

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

Auto Import:

自動引入模塊

filesize：

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

代碼檢測:

ESlint：

ESlint 接管原生 js 提示，能夠自定製提示規則。

HTMLHint：

HTML代碼檢測

Code Spell Checker :

代碼拼寫檢查

 

stylelint:

進行css,less,scss語法檢查

TSLint：

對不一樣的類型文件進行代碼檢查。

JSHint:

js代碼檢查。

vscode-caniuse:

 

Can I Use：

 

顯示瀏覽器支持信息:The default keybinding is ctrl+shift+i on Windows/Linux and ctrl+c on Mac. You can override it with your custom settings.

 

代碼格式化:

beautify：

格式化代碼的工具

 Prettier：

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

預覽相關:

open in browser:

能夠在HTML文件上右鍵單擊選擇在瀏覽器中打開,瀏覽器中的地址欄的地址和在文件夾中雙擊打開HTML文件同樣。

View In Browser:

在默認瀏覽器中查看,地址也是雙擊打開的地址 。

 

Color Info：

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

SVG Viewer：

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

 

Preview:

在VScode 中預覽連接對應文件

素材相關:

VSCode Faker：

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

1. Type cmd+shift+p
2. Choose fake data category
3. Choose sub category

Icon Fonts：

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

Bootstrap 3 Sinnpet：

經常使用 bootstrap 的能夠下

主題：

1.Themes：

1.Material   2.Dracula   3.One Dark Pro

2.圖標主題：

1.vscode-icons：

3.代碼主題相關:

Bracket Pair Colorizer：

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

調試：

Debugger for Chrome：

讓 vscode 映射 chrome 的 debug功能，靜態頁面均可以用 vscode 來打斷點調試。

 

 Quokka ：

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

 

工程管理相關:

SVN:

集成SVN工具

tortoise-svn:

集成SVN工具

 

Project Manager：

 

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

 

 

vue插件：

vetur：

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

VueHelper：

snippet代碼片斷

Vue 2 Snippets：

這個插件基於最新的 Vue 官方語法高亮文件添加了Syntax Highlight，而且依據 Vue 2 的 API 添加了Code Snippets。