详细介绍

web essentials 2012是一个最好用的VS插件 Web Essentials 可以为您解决开发上的难题,样式兼容性,样式预览,快速运行,可以在编写 typescript 的同时就能够看到生成的 javascript 代码,不但能学typescript,还可以用它学javascript。

web essentials 2012功能支持列表:

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文件

可以使用CTRL+K, CTRL+C注释或CTRL+K, CTRL+U反注释代码,和VS里C#编程使用的快捷键一样。

TODO注释特殊支持

任何注释如果包括TODO关键字的话,都会在左边显示一个灰色的特殊标记,来提示你该部分暂未完成。

颜色预览

鼠标移动到颜色上的时候,可以预览改颜色,或者在CSS编辑器里也能直接预览颜色

折叠功能

需要一个生命的选择器,右键可以看到Surround With Region即可将这段代码进行折叠起来。

功能选择以后,它会自动定位到默认的 MyRegion名称那里,让你修改自己的折叠大纲的名称。

字符排序

点击任意选择器的时候,都可以让该选择器的CSS定义进行排序

括号匹配

目前支持{},[], ()的匹配。

压缩代码

该扩展使用的 AjaxMin library来压缩CSS代码的。

支持拖拽

支持图片和字体的拖拽,例如如果你拖拽tomxu.jpg图片到该CSS选择器,那么将自动生成如下代码(字体也是类似):

颜色可以在十六进制、rgb、和名称直接互相转换

可以在选择器上定义只支持哪些浏览器版本

可以在CSS语法定义只支持哪些浏览器版本.

安装Web Essentials 2012导致code snippets 失效解决方案:

Web Essentials 2012特定版本会导致HTML编辑时的程式码片段失效,因为这只是一个设定上的问题,所以没有什么好解释的,直接来看设定吧。

开启Visual Studio2012→工具→选项→Web Essentials→General

webessentials2012 web调试插件 web调试
 

将「Enable HTML ZenCoding」从「True」设定成「False」后按下「确定」,即可完成。

↓ 更多简介
web essentials 2012

推荐下载

共有0位网友发表了评论 网友评论
(请文明发言!)