Visual Studio前端开发工具/扩展

怎么样让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等),确切的说这不是一个工具,不过由于挺有意思的,所以在这个帖子里列出了。

如果大家有任何好的工具,请在留言里回复,多谢。

时间: 2024-10-11 00:57:26

Visual Studio前端开发工具/扩展的相关文章

最锋利的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 Pr

使用Visual Studio Code开发.NET Core看这篇就够了

原文:使用Visual Studio Code开发.NET Core看这篇就够了 作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9926078.html 在本文中,我将带着大家一步一步的通过图文的形式来演示如何在Visual Studio Code中进行.NET Core程序的开发,测试以及调试.尽管Visual Studio Code的部分功能还达不到Visual Studio的水平,但它实际上已经足够强大来满足我们的日常开发.而且其轻量化,插件化

使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(一)-- 起步

本文记录了在Windows环境下安装Visual Studio Code开发工具..Net Core 1.0 SDK和开发一个简单的Web-Demo网站的全过程. 一.安装Visual Studio Code 安装文件下载地址:VS Code,当前最新版本是1.3. 推荐安装最新版,因为附带Debug插件,支持在vs code上进行断点调试. 二.安装.Net Core 1.0 SDK 安装文件下载地址:.Net Core SDK 三.创建一个.Net Core应用程序 1. 打开cmd窗口,创

BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发人员工具 使用Visual Studio 2012开发SharePoint

BEGINNING SHAREPOINT? 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发人员工具 使用Visual Studio 2012开发SharePoint应用程序 VS2012带有标准系列的工程级和项目级模板,使得SP开发更加简单更加强大.使用SP2010你可以应用VS2010做大量开发,使用VS2012,现在你可以有很多新的功能和选择. 微软带了标准系列的工程级模板,开箱即用,附带额外系列的工程项目模板来帮助你进行开发.例如,你可以创建SP2013

如何利用 Visual Studio 自带工具提高开发效率

原文:如何利用 Visual Studio 自带工具提高开发效率 Visual Stuido 是一款强大的Windows 平台集成开发工具,你是否好好地利用了它呢? 显示行号 有些时候(比如错误定位)的时候,显示行号将有利于我们进行快速定位. 如何显示 1. 工具 / 选项 / 文本编辑器 -> 选择对应的语言 2. 勾选 "行号" 使用书签 和平常意义的书签类似,当我们希望在日后某一时刻快速定位到一处代码时使用.比如在项目例会上,你需要演示本周你所做的一些改进,在开会前可以事先

Visual Studio 2015 开发 ASP.NET 5 有何变化?(转)

出处:http://www.cnblogs.com/xishuai/p/visual-studio-2015-preview-asp-net-5-change.html 本篇博文目录: ASP.NET 5 模版 ASP.NET 5 目录结构 前端管理工具 无编译开发 Microsoft Git Provider 智能感知和错误信息 Smart Unit Testing 等待发现... Visual Studio 2015 Preview 版本部分说明: ASP.NET 5 Preview run

Visual Studio 2015 开发 ASP.NET 5

在以往微软发布或更新 Visual Studio 版本时,我们开发 ASP.NET 应用程序,带给我们的变化其实并不是很大,或者说你根本就感受不到变化,你感受到的只是下载安装了几个 G 的 Update 更新包,但这次微软发布更新的 ASP.NET,无疑是巨大的,首先我们来看下 ASP.NET 5 的新功能介绍: Web Forms.MVC 和 Web API 统一编程模型. 无编译开发体验(no-compile),修改代码文件,无需编译,只需要浏览器刷新即可. 无缝云开发支持(Cloud-re

对网站前端开发工具和浏览器的介绍

Web 前端开发工具 1.NotePad ① 占用内存小,微软自带,免安装. ② 不方便编辑代码,一次只能打开一个文件. ③ 不可扩展插件,写代码效率低. ④ 对于代码缩进不太友好. ⑤ 通常来说支持基本的纯文字编辑工作.格式不是很好控制. 2.EditPlus ① 小巧但功能强大,占用内存小. ② 颜色标记智能代码提示以及高亮显示. ③ 同时编辑多个文件 ④ 可支持各类丰富的插件. ⑤ 支持代码高亮显示,并且支持多种语言. ⑥ NotePad开源且跨平台. ⑦ 方便编辑代码.可以同时编辑多个文

Visual Studio中开发

如何在Visual Studio中开发自己的代码生成器插件  Visual Studio是美国微软公司开发的一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码管控工具.集成开发环境(IDE)等等,且所写的目标代码适用于微软支持的所有平台.可以说.NET开发人员离不开它,它可以极大的提高编写软件的效率. Visual Studio作为一个世界级开发工具,当然支持通过插件方式对其功能进行扩展,开发人员可以定制自己的插件来进一步提升Visual Studio的功