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

以上这篇Visual Studio 2010 前端开发工具/扩展/插件推荐就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 微软 Visual Studio 2010官方下载地址给大家

    官方地址: http://www.microsoft.com/visualstudio/en-us/download 点击相应的Trial下载链接进入下载页面 不同版本下载: Microsoft Visual Studio 2010 Premium - ISO http://www.microsoft.com/downloads/details.aspx?FamilyID=f81412a2-d48e-4040-9b32-27eaf771c5db&displaylang=en Microsoft

  • VS2010发布Web网站技术攻略

    VS2010 Web网站发布详解 对VS2010来说,发布Web是一件相当容易的事情,也许就是这个原因导致网上关于发布网站具体细节的资料很少.然而这些正是初学者所需要的,下面我详细介绍一下Web网站发布的具体过程. 第一步:在解决方案资源管理器中右击Web应用程序名(例如:newsSystem)-->点击发布,如图所示: 第二步:在弹出的对话框中,发布方法选:文件系统,目标位置自定义(如:选桌面的test文件夹),勾选"发布前删除所有现有文件"单选框,然后点击发布即可.如图: 补

  • Visual Stduio 2010开发环境搭建教程

    Visual Studio是微软公司推出的开发环境.是目前最流行的Windows平台应用程序开发环境. Visual Studio 2010版本于2010年4月12日上市,其集成开发环境(IDE)的界面被重新设计和组织,变得更加简单明了.Visual Studio 2010同时带来了 NET Framework 4.0.Microsoft Visual Studio 2010 CTP( Community Technology Preview--CTP),并且支持开发面向Windows 7的应用

  • vs2010显示代码行数的方法

    从安装VS2010到现在已经有几个月了,每次看到别人的代码能显示行数而自己的不能总感觉不爽,刚百度了一下一共才3步: 1)打开你的VS2010找到  "工具"  里的  "选项" 2)点击选项里的"文本编辑器" 3)点击"所有语言", 在"显示"里将"行号"打钩,最后点击"确定" 设置完成后就可以显示行号了 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家

  • 使用VS2010创建MFC ActiveX工程项目

    1.ActiveX的基本概念 ActiveX控件可以看作是一个极小的服务器应用程序,它不能独立运行,必须嵌入到某个容器程序中,与该容器一起运行.这个容器包括WEB网页,应用程序窗体等... ActiveX控件的后缀名是OCX或者DLL.一般是以OCX和动态库共存的形式打包成cab或者exe的文件放在服务器上,客户端下载后运行安装cab或exe解压成OCX和动态库共存的文件,然后注册ocx文件. ActiveX控件是基于com标准,使得软件部件在网络环境中进行交互的技术集.它与具体的编程语言无关.

  • vs.net 2010 扩展插件小结 提高编程效率

    注:有些插件需要vs.net professional或更高的版本. 进入正题,打开vs.netàToolsàExtension Manager-如下图: 单击Extension Manager进入vs.net插件管理,如下图所示: 这里面会列出已安装的插件.网上其他插件和插件更新. 在Installed Extensions中,我们可以禁用(Disable)和卸载(Uninstall)安装过的插件. 在Online Gallery中,单击选中一款未安装过的插件(如下图): 然后可以看到一个Do

  • vs2010无法打开项目文件的原因分析及解决方法

    使用 Visual Studio 2010 SP1 打开项目文件的时候出现以下提示信息: 报错的原因是 vs2010需要把mvc版本升到3,默认的vs2010的mvc是2 vs2010 mvc3下载地址:http://www.microsoft.com/web/handlers/webpi.ashx?command=getinstallerredirect&appid=MVC3

  • VS2010/VS2013项目创建 ADO.NET连接mysql/sql server详细步骤

    本随笔主要是对初学者通过ADO.NET连接数据库的步骤(刚开始我也诸多不顺,所以总结下,让初学者熟悉步骤) 1.打开VS新建一个项目(这里的VS版本不限,建项目都是一样的步骤) VS2010版本如图: VS2013版本如图: 2.非空项目创建后,右侧"解决方案管理器"中会有一个"models"文件,右键"models",具体步骤如下: 2-1步骤 2-2步骤 2-3步骤 2-3-1 注意这个是VS2010版本的截图 2-4步骤 2-5步骤 2-6

  • VS2010新建站点发布并访问步骤详解

    今天小编就带大家学习如何实现VS2010从新建站点到访问亲们的网站,我们的学习流程: 新建网站--IIS配置--发布网站-访问网站 大家是不是等着急了,下面就进入今天的主题! 我们在开发asp.net时,首先学会的就是在平台上新建一个站点,所谓"唱大戏搭架子",也是这么个道理,我们站点发布第一步就是新建网站. 我们首先打开VS2010,如下: 我们按照上图所示,点击"网站",选择开发语言"C#",来新建一个空网站.如下: 我们再来选择站点的位置,

  • VS2010制作第一个简单网站

    制作一个简单示例网站的步骤: 一.启动VS 2010开发环境,选择菜单中的"文件",选择其中的"新建",再选择"网站",会弹出"新建网站"对话框. 二.在"新建网站"的对话框,在"已安装模板"中选择Visual C#,右侧的选择"ASP.NET网站"选项,单击"新建网站"中的"文件系统",下拉菜单中有"文件系统&quo

随机推荐