最好用的VS插件 Web Essentials 可以為您解決開發(fā)上的難題,樣式兼容性,樣式預(yù)覽,快速運(yùn)行。一個(gè) Visual Studio 插件,可以在編寫 typescript 的同時(shí)就能夠看到生成的 javascript 代碼,不但能學(xué)typescript,還可以用它學(xué)javascript,嘿嘿~~
對(duì)CSS屬性進(jìn)行兼容性提示。可以顯示Google Chrome,F(xiàn)ireFox、IE、Oper、Apple Safari的兼容性。
Web Essentials對(duì)CSS、JavaScript和HTML都提供了很多快捷的功能支持.
功能支持列表:
CSS
即時(shí)預(yù)覽Live Web Preview
每次修改的時(shí)候,都可以使用CTRL+ALT+Enter快捷鍵或者點(diǎn)擊方案右鍵上的Live Web Preview選項(xiàng)來(lái)即時(shí)預(yù)覽你修改的頁(yè)面,每次修改完 HTML或者相應(yīng)的CSS, Ctrl+S保存以后,即時(shí)窗口會(huì)立即生效。
兼容性CSS代碼生成
很多CSS3的代碼都不兼容,不同的瀏覽器有不同的語(yǔ)言,使用此擴(kuò)展可以通過(guò)提升的方式自動(dòng)添加特殊的CSS標(biāo)記,例如-moz, -webkit, -ms and -o開頭的一些CSS,也只可以選擇特定的瀏覽器。
生產(chǎn)的代碼結(jié)果如下:
如果你已經(jīng)添加了一部分的話,該擴(kuò)展會(huì)只添加除這部分之外的CSS代碼,不會(huì)重復(fù)添加的。
上下箭頭可以改變數(shù)字值
當(dāng)你把鍵盤提示符放在數(shù)字上或者數(shù)字后面的話,例如5px, 25%, 0.6em, 23等,可以使用CTRL+UP或者CTRL+DOWN來(lái)增加或減小數(shù)值。
支持CSS, SaSS, LESS和JavaScript文件
可以使用CTRL+K, CTRL+C注釋或CTRL+K, CTRL+U反注釋代碼,和VS里C#編程使用的快捷鍵一樣。
TODO注釋特殊支持
任何注釋如果包括TODO關(guān)鍵字的話,都會(huì)在左邊顯示一個(gè)灰色的特殊標(biāo)記,來(lái)提示你該部分暫未完成。
顏色預(yù)覽
鼠標(biāo)移動(dòng)到顏色上的時(shí)候,可以預(yù)覽改顏色,或者在CSS編輯器里也能直接預(yù)覽顏色
折疊功能
需要一個(gè)生命的選擇器,右鍵可以看到Surround With Region即可將這段代碼進(jìn)行折疊起來(lái)。
功能選擇以后,它會(huì)自動(dòng)定位到默認(rèn)的 MyRegion名稱那里,讓你修改自己的折疊大綱的名稱。
字符排序
點(diǎn)擊任意選擇器的時(shí)候,都可以讓該選擇器的CSS定義進(jìn)行排序
括號(hào)匹配
目前支持{},[], ()的匹配。
壓縮代碼
該擴(kuò)展使用的 AjaxMin library來(lái)壓縮CSS代碼的。
支持拖拽
支持圖片和字體的拖拽,例如如果你拖拽tomxu.jpg圖片到該CSS選擇器,那么將自動(dòng)生成如下代碼(字體也是類似):
顏色可以在十六進(jìn)制、rgb、和名稱直接互相轉(zhuǎn)換
可以在選擇器上定義只支持哪些瀏覽器版本
可以在CSS語(yǔ)法定義只支持哪些瀏覽器版本.
安裝Web Essentials 2012導(dǎo)致code snippets 失效解決方案:
Web Essentials 2012特定版本會(huì)導(dǎo)致HTML編輯時(shí)的程式碼片段失效,因?yàn)檫@只是一個(gè)設(shè)定上的問(wèn)題,所以沒(méi)有什么好解釋的,直接來(lái)看設(shè)定吧。
開啟Visual Studio2012→工具→選項(xiàng)→Web Essentials→General
將「Enable HTML ZenCoding」從「True」設(shè)定成「False」后按下「確定」,即可完成。