[轉載]最鋒利的Visual Studio Web開發工具擴充：Web Essentials詳解

最鋒利的Visual Studio Web開發工具擴充：Web Essentials詳解

Web Essentials是目前為止見過的最好用的VS擴充工具了，具體功能請待我一一道來。

首先，從Extension Manager裡安裝：最新版本是19号釋出的2.5版

然後重新開機你的VS開發環境，就可以使用它提供的友善功能了。

Web Essentials對CSS、JavaScript和HTML都提供了很多快捷的功能支援，具體清單如下：

CSS

即時預覽Live Web Preview

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

相容性CSS代碼生成

很多CSS3的代碼都不相容，不同的浏覽器有不同的語言，使用此擴充可以通過提升的方式自動添加特殊的CSS标記，例如-moz, -webkit, -ms and -o開頭的一些CSS，也隻可以選擇特定的浏覽器。

生産的代碼結果如下：

如果你已經添加了一部分的話，該擴充會隻添加除這部分之外的CSS代碼，不會重複添加的。

上下箭頭可以改變數字值

當你把鍵盤提示符放在數字上或者數字後面的話，例如5px, 25%, 0.6em, 23等，可以使用CTRL+UP或者CTRL+DOWN來增加或減小數值。

支援CSS, SaSS, LESS和JavaScript檔案

可以生産Base64格式的字元串代替URL位址

如果你通過url來引用背景圖的話，那可以直接通過該擴充提供的Embed resource as base64功能将引用轉換成base64格式的。

如果嫌内容太長，可以使用折疊功能。

支援快捷鍵注釋和反注釋代碼

可以使用CTRL+K, CTRL+C注釋或CTRL+K, CTRL+U反注釋代碼，和VS裡C#程式設計使用的快捷鍵一樣。

TODO注釋特殊支援

任何注釋如果保護TODO關鍵字的話，都會在左邊顯示一個灰色的特殊标記，來提示你該部分暫未完成。

顔色預覽

滑鼠移動到顔色上的時候，可以預覽改顔色，或者在CSS編輯器裡也能直接預覽顔色

字型預覽

圖檔預覽

折疊功能

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

功能選擇以後，它會自動定位到預設的 MyRegion名稱那裡，讓你修改自己的折疊大綱的名稱。

字元排序

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

括号比對

目前支援{}，[]， ()的比對。

壓縮代碼

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

代碼折疊

支援拖拽

支援圖檔和字型的拖拽，例如如果你拖拽tomxu.jpg圖檔到該CSS選擇器，那麼将自動生成如下代碼（字型也是類似）:

顔色可以在十六進制、rgb、和名稱直接互相轉換

可以在選擇器上定義隻支援哪些浏覽器版本

可以在CSS文法定義隻支援哪些浏覽器版本

JavaScript

支援Region折疊

<a></a>

支援代碼折疊

同詞高亮

在一個檔案的所有代碼中，如果選擇一個變量，那該代碼中所有相同的變量都會高亮顯示，和C#裡一樣。

使用AjaxMin library進行了壓縮代碼，不僅壓縮了，還使用了混淆，牛!

快捷添加檔案

在解決方案裡，添加新項的時候，可以直接選擇添加JavaScript檔案還是Stylesheet檔案，友善！

HTML

支援使用者控件的拖拽

以前我們在asp.net webform開發的時候，直接用滑鼠将user control拖拽到aspx頁面或者模闆容器的時候都會自動生成a連接配接，使用此擴充以後，将會自動注冊命名控件，然後生成帶有&lt;uc:name/&gt;的代碼，可以直接使用咯。

支援Video和Audio檔案的拖拽

也支援對音頻和視訊檔案的拖拽。

酷小孩提示：此插件是免費的，大家可以從以上位址去下載下傳，也可以在visual studio 2010的“擴充管理器”中搜尋“Web Essentials”安裝。

本文轉自 酷小孩 部落格園部落格，原文連結：http://www.cnblogs.com/babycool/archive/2011/11/22/2259326.html ，如需轉載請自行聯系原作者