最鋒利的Visual Studio Web開發工具擴充：Web Essentials使用詳解_實用技巧

首先，從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即可將這段代碼進行摺疊起來。

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

 

 

字元排序

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

 

 

括弧匹配

目前支援{}，[]， ()的匹配。

 

 

壓縮代碼

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

 

 

程式碼摺疊功能

 

 

支援拖拽

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

background-image: url('../tomxu.jpg');

 

 

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

 

 

可以在選取器上定義只支援哪些瀏覽器版本

 

 

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

 

 

JavaScript

支援Region摺疊

//#region MyRegion

function Example() {

}

//#endregion

 

 

支援程式碼摺疊功能

 

 

括弧匹配

目前支援{}，[]， ()的匹配。

 

 

同詞高亮

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

 

 

壓縮代碼

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

 

 

快捷添加檔案

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

 

 

HTML

支援使用者控制項的拖拽

以前我們在asp.net webform開發的時候，直接用滑鼠將user control拖拽到aspx頁面或者模板容器的時候都會自動產生a串連，使用此擴充以後，將會自動註冊命名控制項，然後產生帶有<uc:name/>的代碼，可以直接使用咯。

 

 

支援Video和Audio檔案的拖拽

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

以上這篇最鋒利的Visual Studio Web開發工具擴充：Web Essentials使用詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。