- 时间：2021-09-27 10:52 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：最锋利的Visual Studio Web开发工具扩展：Web Essentials使用详解
首先，从Extension Manager里安装：最新版本是19号发布的2.5版
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100153_0_23610.jpg[/img]
然后重启你的VS开发环境，就可以使用它提供的方便功能了。
Web Essentials对CSS、JavaScript和HTML都提供了很多快捷的功能支持，具体列表如下：
[b]CSS[/b]
[b]
[/b]
[b]即时预览Live Web Preview[/b]
每次修改的时候，都可以使用CTRL+ALT+Enter快捷键或者点击方案右键上的Live Web Preview选项来即时预览你修改的页面，每次修改完 HTML或者相应的CSS， Ctrl+S保存以后，即时窗口会立即生效。
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100154_1_1457.jpg[/img]
[b]
[/b]
[b]兼容性CSS代码生成[/b]
很多CSS3的代码都不兼容，不同的浏览器有不同的语言，使用此扩展可以通过提升的方式自动添加特殊的CSS标记，例如-moz, -webkit, -ms and -o开头的一些CSS，也只可以选择特定的浏览器。
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100154_2_69505.png[/img]
生产的代码结果如下：
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100155_3_71915.png[/img]
如果你已经添加了一部分的话，该扩展会只添加除这部分之外的CSS代码，不会重复添加的。
[b]上下箭头可以改变数字值[/b]
当你把键盘提示符放在数字上或者数字后面的话，例如5px, 25%, 0.6em, 23等，可以使用CTRL+UP或者CTRL+DOWN来增加或减小数值。
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100155_4_92087.png[/img]
支持CSS, SaSS, LESS和JavaScript文件
[b]可以生产Base64格式的字符串代替URL地址[/b]
如果你通过url来引用背景图的话，那可以直接通过该扩展提供的Embed resource as base64功能将引用转换成base64格式的。
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100155_5_7079.png[/img]
如果嫌内容太长，可以使用折叠功能。
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100156_6_81130.png[/img]
[b]支持快捷键注释和反注释代码[/b]
可以使用CTRL+K, CTRL+C注释或CTRL+K, CTRL+U反注释代码，和VS里C#编程使用的快捷键一样。
[b]TODO注释特殊支持[/b]
任何注释如果包括TODO关键字的话，都会在左边显示一个灰色的特殊标记，来提示你该部分暂未完成。
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100156_7_51847.jpg[/img]
[b]颜色预览[/b]
鼠标移动到颜色上的时候，可以预览改颜色，或者在CSS编辑器里也能直接预览颜色
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100156_8_32988.png[/img]
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100157_9_98404.jpg[/img]
[b]字体预览[/b]
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100157_10_24160.png[/img]
[b]图片预览[/b]
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100158_11_53890.jpg[/img]
[b]折叠功能[/b]
需要一个生命的选择器，右键可以看到Surround With Region即可将这段代码进行折叠起来。
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100159_12_62890.jpg[/img]
功能选择以后，它会自动定位到默认的 MyRegion名称那里，让你修改自己的折叠大纲的名称。
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100100_13_98595.jpg[/img]
[b]字符排序[/b]
点击任意选择器的时候，都可以让该选择器的CSS定义进行排序
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100100_14_90329.png[/img]
[b]括号匹配[/b]
目前支持{}，[]， ()的匹配。
[b]压缩代码[/b]
该扩展使用的 AjaxMin library来压缩CSS代码的。
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100100_15_88800.png[/img]
[b]代码折叠[/b]
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100101_16_91741.png[/img]
[b]支持拖拽[/b]
支持图片和字体的拖拽，例如如果你拖拽tomxu.jpg图片到该CSS选择器，那么将自动生成如下代码（字体也是类似）:
background-image: url('../tomxu.jpg');
[b]颜色可以在十六进制、rgb、和名称直接互相转换[/b]
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100101_17_86769.png[/img]
[b]可以在选择器上定义只支持哪些浏览器版本[/b]
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100102_18_42980.png[/img]
[b]可以在CSS语法定义只支持哪些浏览器版本[/b]
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100102_19_12080.png[/img]
[b]JavaScript[/b]
支持Region折叠
//#region MyRegion
function Example() {
}
//#endregion
[b]支持代码折叠[/b]
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100102_20_66059.png[/img]
[b]括号匹配[/b]
目前支持{}，[]， ()的匹配。
[b]同词高亮[/b]
在一个文件的所有代码中，如果选择一个变量，那该代码中所有相同的变量都会高亮显示，和C#里一样。
[b]压缩代码[/b]
使用AjaxMin library进行了压缩代码，不仅压缩了，还使用了混淆，牛!
[b]快捷添加文件[/b]
在解决方案里，添加新项的时候，可以直接选择添加JavaScript文件还是Stylesheet文件，方便！
[img]http://img.1sucai.cn/uploads/article/2018010710/20180107100103_21_51726.png[/img]
[b]HTML[/b]
[b]支持用户控件的拖拽[/b]
以前我们在asp.net webform开发的时候，直接用鼠标将user control拖拽到aspx页面或者模板容器的时候都会自动生成a连接，使用此扩展以后，将会自动注册命名控件，然后生成带有<uc:name/>的代码，可以直接使用咯。
[b]支持Video和Audio文件的拖拽[/b]
也支持对音频和视频文件的拖拽。
以上这篇最锋利的Visual Studio Web开发工具扩展：Web Essentials使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程素材网。
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
