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.
Download Web Standards Update for Microsoft Visual Studio 2010 SP1
More info at Mads Kristensen’s blog: Web Standards Update - behind the scenes
Download JScript Editor Extensions
(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.
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.
(//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).
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.
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.
You should add Mad's Web Essentials to this list: visualstudiogallery.msdn.microsoft.com/6ed4c78f-a23e-49ad-b5fd-369af0c2107f
You mentionув about Web Standards and Image Optimizer, but forgot about
Web Essentials by Mads Kristensen
FYI you have mixed up SAAS and SASS in the mindbench section :)