VS2012最好用的WEB調(diào)試插件(Web Essentials 2012)

最好用的VS插件 Web Essentials 可以為您解決開發(fā)上的難題，樣式兼容性，樣式預(yù)覽，快速運行。一個 Visual Studio 插件，可以在編寫 typescript 的同時就能夠看到生成的 javascript 代碼，不但能學(xué)typescript，還可以用它學(xué)javascript，嘿嘿~~

對CSS屬性進行兼容性提示�？梢燥@示Google Chrome，F(xiàn)ireFox、IE、Oper、Apple Safari的兼容性。

Web Essentials對CSS、JavaScript和HTML都提供了很多快捷的功能支持.

功能支持列表：

CSS
即時預(yù)覽Live Web Preview
每次修改的時候，都可以使用CTRL+ALT+Enter快捷鍵或者點擊方案右鍵上的Live Web Preview選項來即時預(yù)覽你修改的頁面，每次修改完 HTML或者相應(yīng)的CSS， Ctrl+S保存以后，即時窗口會立即生效。

兼容性CSS代碼生成
很多CSS3的代碼都不兼容，不同的瀏覽器有不同的語言，使用此擴展可以通過提升的方式自動添加特殊的CSS標(biāo)記，例如-moz, -webkit, -ms and -o開頭的一些CSS，也只可以選擇特定的瀏覽器。

生產(chǎn)的代碼結(jié)果如下：
如果你已經(jīng)添加了一部分的話，該擴展會只添加除這部分之外的CSS代碼，不會重復(fù)添加的。

上下箭頭可以改變數(shù)字值
當(dāng)你把鍵盤提示符放在數(shù)字上或者數(shù)字后面的話，例如5px, 25%, 0.6em, 23等，可以使用CTRL+UP或者CTRL+DOWN來增加或減小數(shù)值。

支持CSS, SaSS, LESS和JavaScript文件
可以使用CTRL+K, CTRL+C注釋或CTRL+K, CTRL+U反注釋代碼，和VS里C#編程使用的快捷鍵一樣。

TODO注釋特殊支持
任何注釋如果包括TODO關(guān)鍵字的話，都會在左邊顯示一個灰色的特殊標(biāo)記，來提示你該部分暫未完成。

顏色預(yù)覽
鼠標(biāo)移動到顏色上的時候，可以預(yù)覽改顏色，或者在CSS編輯器里也能直接預(yù)覽顏色

折疊功能
需要一個生命的選擇器，右鍵可以看到Surround With Region即可將這段代碼進行折疊起來。

功能選擇以后，它會自動定位到默認的 MyRegion名稱那里，讓你修改自己的折疊大綱的名稱。

字符排序
點擊任意選擇器的時候，都可以讓該選擇器的CSS定義進行排序

括號匹配
目前支持{}，[]， ()的匹配。

壓縮代碼
該擴展使用的 AjaxMin library來壓縮CSS代碼的。

支持拖拽
支持圖片和字體的拖拽，例如如果你拖拽tomxu.jpg圖片到該CSS選擇器，那么將自動生成如下代碼(字體也是類似):

顏色可以在十六進制、rgb、和名稱直接互相轉(zhuǎn)換
可以在選擇器上定義只支持哪些瀏覽器版本
可以在CSS語法定義只支持哪些瀏覽器版本.

安裝Web Essentials 2012導(dǎo)致code snippets 失效解決方案：

Web Essentials 2012特定版本會導(dǎo)致HTML編輯時的程式碼片段失效，因為這只是一個設(shè)定上的問題，所以沒有什么好解釋的，直接來看設(shè)定吧。

開啟Visual Studio2012→工具→選項→Web Essentials→General

將「Enable HTML ZenCoding」從「True」設(shè)定成「False」后按下「確定」，即可完成。