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
Download Web Standards Update for Microsoft Visual Studio 2010 SP1
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.
(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.
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.
- 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.
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.
(//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
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).
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.
Other tools, not tested
- CSS 3 intellisense schema
- Chirpy: VS Add In For Handling Js, Css, and DotLess Files
ASP.NET MVC & HTML5 templates
As I was working on this post a tweet by @maartenballiauw got my attention:
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.
So that’s it for my current list. Don’t forget, add your favorite tools to the list by leaving a comment.