最鋒利的Visual Studio Web開發工具擴展:Web Essentials詳解(轉)

来源:http://www.cnblogs.com/starksoft/archive/2016/03/04/5241623.html
-Advertisement-
Play Games

Web Essentials是目前為止見過的最好用的VS擴展工具了,具體功能請待我一一道來。 首先,從Extension Manager里安裝:最新版本是19號發佈的2.5版 然後重啟你的VS開發環境,就可以使用它提供的方便功能了。 Web Essentials對CSS、JavaScript和HTM


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選擇器,那麼將自動生成如下代碼(字體也是類似):

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文件的拖拽

也支持對音頻和視頻文件的拖拽。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 最詳細的JavaScript和事件解讀 與瀏覽器進行交互的時候瀏覽器就會觸發各種事件。比如當我們打開某一個網頁的時候,瀏覽器載入完成了這個網頁,就會觸發一個 load 事件;當我們點擊頁面中的某一個“地方”,瀏覽器就會在那個“地方”觸發一個 click 事件。 這樣,我們就可以編寫 JavaScri
  • Selectors (選擇器) ---------------參考MDN中css學習。 首先css選擇器有很多,但總體概括起來的話有兩種: 標簽選擇器(*是特殊情況),可但標簽,也可上下文多標簽; 屬性選擇器(id和class都是屬性,特殊的屬性); 標簽選擇器~單標簽 指此單個的標簽名字,使用時可
  • 網站開發人員經常需要檢查網站的相容性,在各種瀏覽器中,以確保網站的作品完美地在所有的瀏覽器。為此,有大量的跨瀏覽器測試工具,可以幫助開發人員檢查他們的網站之前,他們的網站是。 這裡是全集合的一些最好的免費以及高級跨瀏覽器測試工具,將允許開發人員測試一切。我們希望你會喜歡這個集合,併發現這些工具對你有
  • 1、HTML5 簡介 HTML5 是最新的 HTML 標準,他是萬維網的核心語言、標準通用標記語言下的一個應用“超文本標記語言”。 HTML 的上一個標準 HTML4.01 誕生於 1999年,他的第一代標準誕生於 1995年,自此 Web 世界經歷了巨變,在 HTML4.01 中提出了網頁結構與表
  • offsetLeft 獲取的是相對於父對象的左邊距 left 獲取或設置相對於 具有定位屬性(position定義為relative)的父對象 的左邊距 如果父div的position定義為relative,子div的position定義為absolute,那麼子div的style.left的值是相
  • 軟體工程的一個主要部分就是構建組件,構建的組件不僅需要具有明確的定義和統一的介面,同時也需要組件可復用。支持現有的數據類型和將來添加的數據類型的組件為大型軟體系統的開發過程提供很好的靈活性。 在C#和Java中,可以使用"泛型"來創建可復用的組件,並且組件可支持多種數據類型。這樣便可以讓用戶根據自己
  • 1xx這一類型的狀態碼,代表請求已被接受,需要繼續處理。這類響應是臨時響應,只包含狀態行和某些可選的響應頭信息,並以空行結束。由於 HTTP/1.0 協議中沒有定義任何 1xx 狀態碼,所以除非在某些試驗條件下,伺服器禁止向此類客戶端發送 1xx響應。 100 Continue 客戶端應當繼續發送請
  • 常見的網頁結構佈局是醬紫的,真是美美噠^O^: 一、添加基本標題h1~h6(沒什麼好說的); 二、標題分組hgroup <hgroup>用來將標題和子標題進行分組。如果一篇文章article或一個區塊section里只有一個標題,就不用分組。如果出現多個標題,可以用hgroup將標題框起來。 <se
一周排行
    -Advertisement-
    Play Games
  • 前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據,比如SQL伺服器的連接串或者是OAuth2的Secret等,這些敏感數據在代碼中是不太安全的,我們不應該在源代碼中存儲密碼和其他的敏感數據,一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型,用戶可以根據需要進行修改 ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 如果讓你來做一個有狀態流式應用的故障恢復,你會如何來做呢? 單機和多機會遇到什麼不同的問題? Flink Checkpoint 是做什麼用的?原理是什麼? ...
  • C++ 多級繼承 多級繼承是一種面向對象編程(OOP)特性,允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護,並促進代碼重用。 多級繼承的語法 在 C++ 中,使用 : 符號來指定繼承關係。多級繼承的語法如下: class DerivedClass : public BaseClass1 ...
  • 前言 什麼是SpringCloud? Spring Cloud 是一系列框架的有序集合,它利用 Spring Boot 的開發便利性簡化了分散式系統的開發,比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子,而是將市面上開發得比較好的模塊集成進去,進行封裝,從 ...
  • class_template 類模板和函數模板的定義和使用類似,我們已經進行了介紹。有時,有兩個或多個類,其功能是相同的,僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • 目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制),V是羅馬數字5,是UNI ...