工欲善其事渠欺,必先利其器
以下就是開(kāi)發(fā)Vue必備插件:
Vetur —— 語(yǔ)法高亮针史、智能感知、Emmet等
包含格式化功能而芥, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化選中代碼膀值,兩個(gè)Ctrl需要同時(shí)按著)
EsLint —— 語(yǔ)法糾錯(cuò)
Debugger for Chrome —— 映射vscode上的斷點(diǎn)到chrome上棍丐,方便調(diào)試(配置有點(diǎn)麻煩,其實(shí)我沒(méi)用這個(gè))
Auto Close Tag —— 自動(dòng)閉合HTML/XML標(biāo)簽
Auto Rename Tag —— 自動(dòng)完成另一側(cè)標(biāo)簽的同步修改
JavaScript(ES6) code snippets —— ES6語(yǔ)法智能提示以及快速輸入沧踏,除js外還支持.ts歌逢,.jsx,.tsx翘狱,.html趋翻,.vue,省去了配置其支持各種包含js代碼文件的時(shí)間
Path Intellisense —— 自動(dòng)路徑補(bǔ)全
HTML CSS Support —— 讓 html 標(biāo)簽上寫(xiě)class 智能提示當(dāng)前項(xiàng)目所支持的樣式
Beautify——格式化代碼盒蟆,值得注意的是踏烙,beautify插件支持自定義格式化代碼規(guī)則
Bracket Pair Colorizer——給括號(hào)加上不同的顏色,便于區(qū)分不同的區(qū)塊历等,使用者可以定義不同括號(hào)類(lèi)型和不同顏色
open in browser——直接右鍵項(xiàng)目單擊啟動(dòng)
live service安裝
vue也要安裝
HTML Snippets
超級(jí)實(shí)用且初級(jí)的 H5代碼片段以及提示
HTML CSS Support
讓 html 標(biāo)簽上寫(xiě)class 智能提示當(dāng)前項(xiàng)目所支持的樣式
新版已經(jīng)支持scss文件檢索
Debugger for Chrome
讓 vscode 映射 chrome 的 debug功能讨惩,靜態(tài)頁(yè)面都可以用 vscode 來(lái)打斷點(diǎn)調(diào)試,真666~
配置稍微復(fù)雜一些寒屯,哪天心情好我再另寫(xiě)教程吧~
jQuery Code Snippets
jquery 重度患者必須品荐捻,廢話(huà)不多說(shuō),上圖
vscode-icon
讓 vscode 資源樹(shù)目錄加上圖標(biāo)寡夹,必備良品处面!
Path Intellisense
自動(dòng)路勁補(bǔ)全,默認(rèn)不帶這個(gè)功能的菩掏,趕緊裝
Npm Intellisense
require 時(shí)的包提示(最新版的vscode已經(jīng)集成此功能)
Document this
js 的注釋模板 (注意:新版的vscode已經(jīng)原生支持,在function上輸入/** tab)
ESlint
ESlint 接管原生 js 提示魂角,可以自定制提示規(guī)則。
HTMLHint
html代碼檢測(cè)
Project Manager
在多個(gè)項(xiàng)目之前快速切換的工具
beautify
格式化代碼的工具
Bootstrap 3 Sinnpet
常用 bootstrap 的可以下
Atuo Rename Tag
修改 html 標(biāo)簽智绸,自動(dòng)幫你完成尾部閉合標(biāo)簽的同步修改野揪,不過(guò)有些bug。
GitLens
豐富的git日志插件
fileheader
頂部注釋模板瞧栗,可定義作者斯稳、時(shí)間等信息,并會(huì)自動(dòng)更新最后修改時(shí)間
filesize
在底部狀態(tài)欄顯示當(dāng)前文件大小迹恐,點(diǎn)擊后還可以看到詳細(xì)創(chuàng)建挣惰、修改時(shí)間
Bracket Pair Colorizer
讓括號(hào)擁有獨(dú)立的顏色,易于區(qū)分≡髅可以配合任意主題使用珍语。
Vue插件
以下推薦vue框架所需的插件
vetur
語(yǔ)法高亮、智能感知唇辨、Emmet等
VueHelper
snippet代碼片段
Import Cost
引入包大小計(jì)算,對(duì)于項(xiàng)目打包后體積掌握很有幫助
主題
Material
冷門(mén)廊酣、好看、實(shí)用赏枚。此主題已停更許久
Dracula
目前我覺(jué)得是vscode上最漂亮的主題,vscode 1.11+允許自定義statusBar等全局ui后,該主題也跟進(jìn)改了很多小細(xì)節(jié),良心!~
源于Atom,老版本的Atom One Dark主題可以扔了.