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

也支持对音频和视频文件的拖拽。

最锋利的Visual Studio Web开发工具扩展:Web Essentials详解(转)的更多相关文章

  1. 【翻译】我钟爱的Visual Studio前端开发工具/扩展

    原文:[翻译]我钟爱的Visual Studio前端开发工具/扩展 怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做 ...

  2. Visual Studio前端开发工具/扩展

    怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做前端开发.Visual Studio 2010不管是旗舰版还是免费版 ...

  3. 最锋利的Visual Studio Web开发工具扩展:Web Essentials详解

    原文:最锋利的Visual Studio Web开发工具扩展:Web Essentials详解 Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从E ...

  4. web开发的跨域问题详解

    本文由云+社区发表 做过 web 开发的同学,应该都遇到过跨域的问题,当我们从一个域名向另一个域名发送 Ajax 请求的时候,打开浏览器控制台就会看到跨域错误,今天我们就来聊聊跨域的问题. 1. 浏览 ...

  5. 移动web开发之像素和DPR详解

    前话: 像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就不清楚了.本文将介绍关于像素的相关知识 什么 ...

  6. 最锋利的Visual Studio Web开发工具扩展:Web Essentials详解【转】

    Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境 ...

  7. Taffy Web开发,Python Flask实践详解

    1. 前言 最近为Taffy自动化测试框架写了个页面,主要实现了用例管理.执行,测试报告查看管理.发送邮件及配置等功能. 2. 实现细节 页面使用Python Flask +Bootstrap开发,还 ...

  8. Taffy自动化测试框架Web开发,Python Flask实践详解

    1. 前言 最近为Taffy自动化测试框架写了个页面,主要实现了用例管理.执行,测试报告查看管理.发送邮件及配置等功能.   本页面适用所有基于taffy/nose框架编写的自动化测试脚本,或基于un ...

  9. 移动设备web开发插件iScroll的使用详解

    地址:http://blog.nnnv.cn/index.php/archives/65

随机推荐

  1. Eclipse魔法堂:任务管理器

    一.前言        Eclipse的任务管理器为我们提供一个方便的入口查看工程代办事宜,并定位到对应的代码行继续之前的工作. 二.使用示例        示例1: /** * @Descripti ...

  2. hive的内部表与外部表创建

    最近才接触Hive.学到了一些东西,就先记下来,免得以后忘了. 1.创建表的语句:Create [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_na ...

  3. eclipse svn插件安装方法

    eclipse svn插件安装方法 使用dropins安装插件 从Eclipse3.5开始,安装目录下就多了一个dropins目录.只要将插件解压后拖到该目录即可安装插件.比如安装svn插件subcl ...

  4. GridView如何实现双击行进行编辑,更新

    虽然标题是原创,但是其实主要的思想呢还是接见了晓风残月的思路,今天在晓风残月的博客上看到了如何利用GridView来实现双击进行编辑.我决定动手实现一下,由于还没有实现双击进行更改操作,所以顺便就把这 ...

  5. 在SQL存储过程中给条件变量加上单引号

    在SQL存储过程中给条件变量加上单引号,不加语句就会出问题,以下就是在存储过程中将条件where设置成了动态变化的,给where赋完值再和前面的语句拼接,再execute(SQL) ), )), )+ ...

  6. 2 Orchard汉化资源包的使用

    Orchard安装完毕之后我们就可以在后台尝试做一些基本的操作感受下Orchard提供的一些功能,比如添加一个页面.菜单.文章什么的.也可以试着新建一些部件.布局之类的感受下.个人建议摆弄一下了解下就 ...

  7. javascript中怎样验证密码是否含有特殊符号、数字、大小写字母,长度是否大于6小于12

    今天在温习了一下以前学过的知识,一般常用验证密码是通过正则表达式或是通过ASCII 一.用AscII码来验证

  8. HDU 5694---BD String

    HDU   5694 Problem Description 众所周知,度度熊喜欢的字符只有两个:B和D.今天,它发明了一种用B和D组成字符串的规则:S(1)=BS(2)=BBDS(3)=BBDBBD ...

  9. Chrome浏览器的Timing分析

    以W3C网站为例: Stalled是浏览器得到要发出这个请求的指令,到请求可以发出的等待时间,一般是代理协商.以及等待可复用的TCP连接释放的时间,不包括DNS查询.建立TCP连接等时间等. SSL( ...

  10. [javaSE] java获取文件列表

    递归测试 import java.io.File; import java.util.ArrayList; import java.util.HashMap; import java.util.Lis ...