前端必備VSCode實用插件總結

必備插件

Auto Close Tag：能夠自動閉合HTML標籤

Auto Rename Tag：修改HTML標籤時，可以自動修改匹配的標籤

Beautify：javaScript、JSON、CSS、Sass、HTML格式化

Chinese (Simplified) Language Pack：中文簡體版(vscode漢化)

Codelf： 變量命名神器，今後不再用發愁要怎麼命名變量了

Color Info：在顏色光標上懸停便可出現色彩模型rgb、hsl、css-color-name、hsv、lab、cmyk.....

CSS Peek：選中HTML裏的一個class名或者id名，能夠直接定位到該名稱的CSS的位置

Debugger for Chrome：在Chrome中運行代碼，使用vscode進行調試。

Document This：爲js文件生成文檔的代碼註釋。

ESLint：eslint插件,檢查編程時的語法錯誤。

GitLens — Git supercharged：能夠直接在光標處顯示代碼編寫人以及時間

HTML Boilerplate：HTML 模版插件，能夠擺脫爲 HTML 新文件從新編寫頭部和正文標籤的苦惱

HTML CSS Support：HTML裏CSS屬性提示

HTML Snippets：HTML代碼自動補全

indent-rainbow：讓縮進帶有顏色

JavaScript (ES6) code snippets：代碼片斷提示

JavaScript Booster：代碼重構，幫你優化代碼

jQuery Code Snippets：代碼片斷提示

Live Sass Compiler：實時將SASS / SCSS文件編譯/轉換爲CSS文件
Live Server：修改文件瀏覽器自動刷新；瀏覽器自動打開項目；本地開發搭建臨時的服務

open in browser：安裝完這個插件就能夠在編輯器菜單右鍵html，在默認瀏覽器打開了

Path Intellisense：自動補全文件名

Prettier - Code formatter：代碼格式化

Quokka.js：是一個調試工具，能夠爲您正在編寫的代碼提供實時反饋。它可以預覽變量的函數和計算值結果

Rainbow Brackets：彩虹形括號，防止代碼裏的括號錯亂

TSLint：tslint插件,檢查編程時的語法錯誤

webpack：webpack插件，能夠直接根據須要建立webpack配置文件，不須要本身配置

vue插件

Vetur：強大的vue開發插件，提供語法高亮、代碼提示、錯誤檢測、格式化等功能

微信小程序插件

vscode weapp api：提供微信小程序api支持及代碼片斷提示

minapp：實現微信小程序中wxml文件的自動補全功能

wechat-snippet：輸入關鍵字提示微信小程序代碼片斷

wxml：格式化微信小程序wxml文件

wxss-peek：爲wxss樣式提供跳轉到定義功能

flutter插件

Awesome Flutter Snippets：Flutter的代碼提示片斷

Flutter：flutter插件，能夠在vscode裏支持flutter