How do we make Visual Studio play nicer with HTML5, CSS3, JavaScript, jQuery, in other words more of the front-end webdev stuff?

Visual Studio 2010, be it the Ultimate, (free) Web Developer Express or other version, is not fully optimized for front-end web development out of the box. But don’t let the default VS2010 install fool you. There is a combination of community effort and tooling enhancements by Microsoft that make VS2010 play nicer to webdevs.

In this post you can find a collection of my favorite extensions and tools to make Visual Studio handy for web devs. I’m focusing on the tools I have used and installed myself, knowing that there are others out there. Do you have any additions for the list? Please let me know so I can add them here!

Most of the extensions I discuss can be installed using the Extension Manager (Tools > Extension Manager). You can also download extensions through the Visual Studio Gallery.

Web Standards Update for Visual Studio

Web Standards Update for Microsoft Visual Studio 2010 SP1

Download Web Standards Update for Microsoft Visual Studio 2010 SP1

This is the first tool I would recommend for introducing HTML5, CSS3 and JavaScript enhancements to the editor. Released by the Visual Web Developer team at Microsoft it includes HTML5 schema support, CSS3 and improved JavaScript IntelliSense.
Although Visual Studio Service Pack 1 did bring some HTML5 schema support I advise installing this extension for improved support.

More info at Mads Kristensen’s blog: Web Standards Update - behind the scenes

JScript Editor Extensions

Download JScript Editor Extensions

You might have seen my previous quick tip on these extensions. JScript Editor Extensions are a welcome addition to the IDE.
If you are used to having full fledged IDE optimized for C# development, things like word highlighting, outlining and brace matching are a given. Not so with JavaScript, until you install this extension.

image
(outlining functions example in some jQuery code)

After installing JScript Editor Extensions you’ll get the option to Enable/Disable four different extensions: Brace Matching, JScript Intellisense <Para>, Outlining and Word Highlighter. Knowing that sometimes installing a specific extension conflicts with one of these it’s a nice option.

image

Make sure you check out the Channel9 video for a live demo of the extensions.

Mindscape Web Workbench

Download the Mindscape Web Workbench.

Scott Hanselman has a great (as always) post on this new “Mindscape Web Workbench” extension for Visual Studio, adding support for CoffeeScript, SAAS and LESS.
Too many new extensions for you? Don’t worry if you haven’t been doing front-end web dev lately it’s normal they sound crazy.

  • Coffeescript: CoffeeScript is a little language that compiles into JavaScript.
  • SAAS: Sass is an extension of CSS3, adding variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS. With the Visual Studio extension conversion into standard CSS is automated.
  • LESS: LESS is similar to SASS in that it also adds support for variables, mixins and more but instead of having a server side or plugin translate the code into standard CSS it runs via a JavaScript library on the client.

JSLint.VS2010

Download JSLint.VS2010

This is an extension of JSLint for Visual Studio, as I’m sure you are aware of by reading the tool’s title. You probably can’t escape doing web front-end without using any JavaScript. But what about applying patterns and validating code? JSLint, a code quality tool is a solution for this.

It will hurt your feelings, that’s the promise of JSLint. No, seriously that’s their tagline but it’s more of a warning on how JSLint will hurt your feelings at the beginning but in the end make you a much better JavaScript developer. Writing JavaScript without applying patterns and best practices leaves your code unmaintainable.
JSLint will apply a set of rules to validate your code and report issues. It helps you enforce usage of patterns and overall code structure.

2011-09-12_0525

2011-09-12_0548
(//note there is a lot wrong with this little script, although it does run it’s just for demo)

You can also try the online version at http://jslint.com

jQuery IntelliSense

Getting IntelliSense support for jQuery in your ASP.NET MVC 3 projects is already be happening. The default template contains the -.vsdoc.js files which have been commented for Visual Studio IntelliSense. If you want to add this support to another project just install the NuGet package “jQuery.vsdoc”, however the vsdoc files are now included in the default jQuery package so you should get them by default (jQuery version 1.6 and up).

2011-09-12_0601

2011-09-12_0550

Image Optimizer (by Mads Kristensen)

Download Image Optimizer

A nice little extension integrated into Vial Studio, which uses SmushIt and PunyPNG for optimizing the images. Run it on a folder of images in Visual Studio to have all the images optimized. Gains of 15% to 40% are not unusual with some files I tried out.

image

Other tools, not tested

  • JSEnhancements: Similar to JSscript Editor Extensions, it provides outlining and matching braces highlighting for JavaScript and CSS editor.
  • CSS 3 intellisense schema
  • Chirpy: VS Add In For Handling Js, Css, and DotLess Files
  • ReSharper 6, already used by lots of developers also has support for JavaScript and CSS (note this one is not free)

ASP.NET MVC & HTML5 templates

As I was working on this post a tweet by @maartenballiauw got my attention:

image

So I did just that in the Visual Studio (NuGet) Package Manager console for an ASP.NET MVC3 project. This package adds support to MVC EditorTemplates for new HTML5 input types such as E-mail, Tel and URL. Technically not a tool for my list but interesting to mention here anyway.
2011-09-12_0627

So that’s it for my current list. Don’t forget, add your favorite tools to the list by leaving a comment.