Web Essentials

很多句话概括效用:

    • 可快速将某样式定义为IE6/7/8专用样式。
    • 可快速将某样式定义为某浏览器内核专用
    • 可将background-image样式对应的图片转码为base64,使样式脱离图片文件。
    • 压缩选中样式
    • 可格式化样式表代码
    • 可查看选定样式的详细文档
    • 便捷化CSS编写方式,自动回车、自动分号等。
    • 极大地优化CSS显示方式
    • ——————分隔——————
    • 压缩js代码
    • 为js代码添加#region块标签
    • 为js代码块(for、function等包含大括号的代码块)添加代码折起显示支持
    • ——————分隔——————
    • 当从解决方中拖拽文件到html代码中时,正确地引入css、js、WebUserControl 等文件(VS默认的拖拽会添加一个A标签指向拖入的文件)。
    • ——————分隔——————
    • 其它

插件下载地址:猛戳这里(内含英文版官方介绍,英语好的过去就不用过来了。)

支持的VS版本:Visual Studio 2010

详细解说:

这真的是一款十分难得的插件,搞ASP.NET开发的杀人越货居家旅行必备。

看图说话之图一

Web Essentials

安装后,在编辑CSS文件时,会自动出现此菜单(Shift + Alt + F10 展开)。

第一项:Add vendor specific properties

为选择的样式添加Firefox和webkit内核的单独写法,效果如下图:

Web Essentials

第二/三项:Make visible to IE6/IE7/IE8

将选择的样式改写成指定IE版本的特殊写法。

第四项:Info and examples

当对某个样式的意思不太清楚的时候,可以选择此项,直接打开此样式在W3School上的详解文档(此站有对应的中文版网站)。

看图说话之图二

Web Essentials

将选择的样式格式化,缺少大括号的会自动补全。

看图说话之图三

Web Essentials

Web Essentials

将样式表中指向的图片资源转换为base64,使样式脱离图片文件。过长的base64代码会被收缩显示。

看图说话之图四

Web Essentials

样式中,颜色表现形式的转换。十六进制、RGB、英文单词 间互转。

看图说话之图五

Web Essentials

鼠标移动到字体名称上时,提供预览。

 

Web Essentials

鼠标移动到颜色上时,提供预览。

 

Web Essentials

鼠标移动到图片URL上时,提供预览。

 

Web Essentials

自动为javascript代码增加左侧的边线收缩按钮。

 

Web Essentials

CSS全文所有颜色增加色块标注。

 

看图说话之图六

Web Essentials

第一项:Surround with region

在编辑js文件或css文件时,对选中的代码块快速添加region标签,使选中的代码块可折叠。下图所示:

Web Essentials

第二项:Minify selection

在编辑js文件或css文件时,对选中的代码块进行压缩。

看图说话之图七

Web Essentials

在编辑js文件或css文件时,可使用快捷键Ctrl + 上/下 快速调整数值。

看图说话之八

Web Essentials

装插件前,从解决方案中往aspx页面拖入一个用户控件,会以a标签方式引入。

装插件后,妥了,正确引入。拖拽js、css、image各种文件后毫无压力了。

妥妥的

 

其它功能

英文不太好,原文有几行没看明白……

 

解说完毕,觉得好使的顶一顶,谢谢合作。




旧时意  沧桑过  还记否  伤心人  白发枯灯走天涯  一朝寂寞换宿醉