B3log Solo  当前在线人数:12 登录 注册

奔放的胸毛。

天行健 胸毛以自强不息

标签: VS插件 (2)

Visual Studio 好用的拓展插件推荐——(二)Web Essentials

2012-12-04 18:09:17 奔放的胸毛。
0  评论    4,729  浏览

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各种文件后毫无压力了。

妥妥的

 

其它功能

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

 

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

, ,

Visual Studio 好用的拓展插件推荐——(一)Image Optimizer

2012-11-30 18:34:44 奔放的胸毛。
1  评论    4,696  浏览

Image Optimizer

一句话概括效用:在Visual Studio的解决方案中,为图片或包含图片的文件夹添加右键菜单,可对图片进行压缩,无损压缩。

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

支持的VS版本:Visual Studio 2010/11

详细解说:

Image Optimizer

安装后,解决方案的右键菜单会出现图中红色图片的菜单项(选择文件夹或多个文件时没有下面那个菜单项)。

第一项:Optimize image

优化(压缩)图片,直接对选中的图片或文件夹中的图片进行优化,优化的过程中会在输出窗口显示相关信息,如下图所示:

Image Optimizer

输出的信息为,某图片、压缩前的大小、压缩后的大小、比例。

妥妥的

无损压缩,妥妥的。

第二项:Extract data URI to clipboard

导出图片的Base64数据到剪贴板。

 

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

, ,

公告

业精于勤,荒于嬉;行成于思,毁于随。

有些事现在不做,一辈子都不会做了
这一刻就计划
下一刻就实施
绝对不给自己找任何退却的理由
做,去做
做了才能有改变,有收获

最新评论

评论最多的文章

访问最多的文章

分类标签

友情链接

存档

TOP
Copyright (c) 2009-2017, b3log.org