Visual Studio 2010 前端开发工具/扩展/插件推荐_实用技巧

怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery，换句话说就是如何更好地做前端开发。Visual Studio 2010不管是旗舰版还是免费版都没有对前端开发方面做充分的优化。不要希望VS默认安装这些东西，我们有很多VS的扩展可是使用。

这里列出的大多数扩展都可以使用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

时间： 2024-09-19 09:38:41

Visual Studio 2010 前端开发工具/扩展/插件推荐_实用技巧的相关文章

Visual Studio 2010崩溃重启问题(源文件编译崩溃)_实用技巧

1周前Visual Studio 2010突然出现崩溃现象.在源文件修改只要一编译,马上就崩溃,而且还不弹出任何异常窗口,严重影响软件开发工作. google了无数解决方案 用下面网站上的办法也不奏效: 1)http://blog.sina.com.cn/s/blog_68cb7e090101963d.html For 32-bit operating systems, run the following command: regsvr32 "c:\Program Files\Internet

Microsoft Visual Studio 2010下如何添加命令提示行_实用技巧

下面给大家介绍Microsoft Visual Studio 2010下添加命令提示行的方法,希望对大家有所帮助. 部分VS2010软件中不存在命令提示行选项,对于这种情况可以通过外部工具进行添加,步骤如下 工具->外部工具 打开外部工具后自行进行添加,参数如下 其中需要注意的是参数一栏 /k "D:\c#\VC\vcvarsall.bat" 参考本文配置的读者可根据各自VS2010的安装目录情况进行修改. 解决这个问题后即可打开VS下的命令行模式.

解决Visual Studio 2005 无法显示设计视图的方法_实用技巧

Visual Studio 2005 无法显示设计视图的解决方法 你们有没有碰到过这样的情况,在用VS2005开发的时候,点击设计视图没有用,怎么点击都看不到设计页面,前段时间为这个被这个问题郁闷了好久,一直的解决方法都只是重新安装,VS2005那么庞大,每次重新安装都要花费我很长的时间,后来在在网上找解决的办法,功夫不负有心人总让让我找到了,现在我把解决办法写下来,大家碰到这样的问题就不用再这么辛苦了. 首先你要确定你的HTML代码没有问题,因为在Visual Studio 2005 中内置的

总结Visual Studio下ASP.NET模板化控件中的数据绑定_实用技巧

在模板化控件中绑定到数据FormView.DataList.Repeater 和 ListView Web 服务器控件使用模板显示数据和检索用户输入,以插入.更新或删除数据.此外,您还可以将模板与 GridView 和 DetailsView 控件一同使用,以自定义数据布局. 通过将模板化控件的 DataSourceID 属性设置为数据源控件的 ID,可以将模板化控件绑定到数据源控件(例如 LinqDataSource.ObjectDataSource 或 SqlDataSource 控件).然

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

原文:[翻译]我钟爱的Visual Studio前端开发工具/扩展 怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做前端开发.Visual Studio 2010不管是旗舰版还是免费版都没有对前端开发方面做充分的优化.不要希望VS默认安装这些东西,我们有很多VS的扩展可是使用. 这篇帖子里你可以看到有一组我喜爱的扩展和工具能让Visual Studio在web开发方面更简单,我只是集中在我安装和使用过的一些工具,

在 Visual Studio 2010 中开发和部署 Windows Azure 应用程序

原文 在 Visual Studio 2010 中开发和部署 Windows Azure 应用程序 在 Visual Studio 2010 中开发和部署 Windows Azure 应用程序 Jim Nakashima.Hani Atassi 和 Danny Thorpe 将应用程序或服务部署到 Microsoft 云服务平台 Windows Azure 的原因有很多.例如,只为使用的内容付费从而可降低操作和硬件成本.构建几乎能无限缩放的应用程序.巨大的存储容量.地理位置等等,不胜枚举. 只有

Vistual Studio 2010 精品插件收集_实用技巧

NestIn  把多個文件合在一個文件下,就像default.aspx下邊有default.aspx.cshttp://visualstudiogallery.msdn.microsoft.com/9d6ef0ce-2bef-4a82-9a84-7718caa5bb45 BatchFormat  在Solution,Project,Folder ,File等上面右擊,格式化所有子級代碼或移除未使用的Using引用http://visualstudiogallery.msdn.microsoft.

ASP.NET MVC5网站开发概述（一）_实用技巧

前段时间一直在用MVC4写个网站开发的demo,由于刚开始学所有的代码都写在一个项目中,越写越混乱,到后来有些代码自己都理不清了.正好看到别人在用MVC5写东西,喜新厌旧的我马上下载了Visual Studio 2013,幸好MVC4到MVC5变化不大,这次准备用MVC5重新写个Demo. 每次看以前写的代码总有把它丢进回收站的冲动,其实没有完美的代码,能解决问题的代码就算是好代码吧,但是我还是决定重新写一个学习的Demo,希望这次能有提高,希望这次能写完吧! 一.开发环境 1.开发环境: Vi

.NET微信公众号开发之公众号消息处理_实用技巧

一.前言   微信公众平台的消息处理还是比较完善的,有最基本的文本消息,到图文消息,到图片消息,语音消息,视频消息,音乐消息其基本原理都是一样的,只不过所post的xml数据有所差别,在处理消息之前,我们要认真阅读,官方给我们的文档:http://mp.weixin.qq.com/wiki/14/89b871b5466b19b3efa4ada8e577d45e.html.首先我们从最基本的文本消息处理开始. <xml> <ToUserName><![CDATA[toUser]