最锋利的Visual Studio Web开发工具扩展：Web Essentials详解
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更好地编写HTML5, CSS3, JavaScript, jQuery，换句话说就是如何更好地做前端开发。Visual Studio 2010不管是旗舰版还是免费版都没有对前端开发方面做充分的优化。不要希望VS默认安装这些东西，我们有很多VS的扩展可是使用。
这篇帖子里你可以看到有一组我喜爱的扩展和工具能让Visual Studio在web开发方面更简单，我只是集中在我安装和使用过的一些工具，如果你还有其它好用的的话，请在这里留言。
这里列出的大多数扩展都可以使用Extension Manager (Tools > Extension Manager)来安装，你可以通过Visual Studio Gallery网站下载这些扩展。
Web Standards Update for Visual Studio
下载：Web Standards Update for Microsoft Visual Studio 2010 SP1
这是第一个我推荐的关于编辑HTML5, CSS3和JavaScript代码的扩展 ，由微软的Visual Web Developer team开发，包括了HTML5 schema的支持，改进了CSS3和JavaScript的智能提示。尽管Visual Studio Service Pack 1提供了一些HTML5 schema的支持，但是我推荐使用这个（应该是最新的）。关于此的更多信息，请访问：Web Standards Update - behind the scenes
JScript Editor Extensions
下载：JScript Editor Extensions
你可能习惯了C#里的语法高亮，区域大纲折叠等功能，JavaScript默认是不支持的，这个插件就是做这个事情的。
安装JScript Editor扩展以后，你可以对以下不同的扩展进行开启和禁用：Brace Matching，JScript Intellisense <Para>，Outlining and Word Highlighter. 有时候知道一些依赖扩展也是比较好的。例如JqueryUI依赖于Jquery。
请查看Channel9上的关于该扩展的一个应用视频。
Mindscape Web Workbench
下载：Mindscape Web Workbench
Scott Hanselman有个帖子专门讲解了Visual Studio下的“Mindscape Web Workbench”扩展， 它加入了对CoffeeScript, SAAS和LESS的支持。担心有太多的扩展？没必要，作为开发人员是很有必要的。
Coffeescript: CoffeeScript是一个能将代码编译成JavaScript的语言。
SAAS: Sass是一个关于CSS3的扩展，添加了variables, mixins,选择器集成等功能。它可以标准化和格式化CSS代码，使用VS的扩展可以自动格式化代码。
LESS: LESS和SASS类型也是提供了对variables, mixins的支持，但是他提供一个了服务器端服务器以及将代码转化成标准CSS的插件（通过在客户端运行一个JavaScript类库）。
JSLint.VS2010
下载：JSLint.VS2010
当你看到JSLint名称的时候，你可能感觉到不用JavaScript就没办法做前端开发。但是如何使用一些模式以及验证你的JS代码，JSLint可以为你做这件事。使用这个插件可能刚开始会让你感觉不爽，因为他使用了很多类似C#的规则（例如，某些变量声明了但是没使用）在编译的时候提示警告。但是一旦过了一段时间以后，你就会发现它确实帮你改掉了很多坏习惯，也让你的代码更加容易维护。
（可以看到，代码尽管可以运行，但是提示了很多警告）
你也可以查看它的在线版本：http://jslint.com
jQuery IntelliSense
asp.net MVC3项目创建的时候就已经包含jQuery和jQuery智能提示的文件了，如果你想再其它类型的项目使用jQuery智能提示，可以通过下载jQuery.vsdoc的NuGet包来实现，不过jQuery1.6以后的版本默认在NuGet包里已经包含了该vsdoc文件了，不用在单独下载了。
Image Optimizer (by Mads Kristensen)
下载：Image Optimizer
Visual Studio的扩展工具Image Optimizer使用SmushIt和PunyPNG来优化压缩图片，在项目图片文件夹下运行这个扩展可以将该目录下所有的图片文件进行压缩。压缩比率通常在15%到40%。
其它未经测试的工具
JSEnhancements：和JSscript Editor扩展类似，提供大纲和JavaScript/CSS高亮
CSS 3 intellisense schema
Chirpy: 处理Js, Css, 和DotLess文件的VS add-in
ReSharper 6, 很多开发人员都已经使用的工具，支持JavaScript和CSS（收费软件）。
ASP.NET MVC & HTML5 templates
通过NuGet为MVC3项目下载该模板，该模板支持更多新型的HTML5元素 （例如input的type新类型Email,Tel,URL等），确切的说这不是一个工具，不过由于挺有意思的，所以在这个帖子里列出了。
如果大家有任何好的工具，请在留言里回复，多谢。
原文地址：http://blogs.msdn.com/b/katriend/archive/2011/09/12/my-favorite-tools-to-optimize-visual-studio-for-webdev.aspx