I’ve been asked this question so many times lately, that a blog-post-answer seemed appropriate. There will be a Web Essentials for Visual Studio 2012!

The original Web Essentials for Visual Studio 2010 quickly became popular amongst web developers in the fall of 2011, when it was first released. Primarily, I think, because it added a lot of missing functionality to the CSS editor. It made working with CSS less painful and more fun – like it should be.

It was flawed, it was slow and it didn’t always feel very accurate. Most of these issues were fixed, but some still remain. I had to parse all the CSS manually using regular expression and other techniques and that had a lot of side effects. In fact, everything was done manually. It wasn’t pretty, but it worked for the most part.

Web Essentials for VS2010

Web Essentials for VS2012

Web Essentials for VS2012 will be different. The performance is spectacular and it feels – and  is – very accurate. The reason for this is largely due to the vast amount of feedback people submitted from the original Web Essentials. Bug reports and feature request still keeps coming in every week.

image image image
Intellisense for HTML tags, class names and ID’s in CSS selectors. Web Essentials 2012

All that feedback also made a huge difference in our priorities when building the brand new CSS editor in VS2012. We basically threw the old editor out after shipping VS2010 and started completely from scratch.  We didn’t do a lot of specifications, instead we prototyped a bunch of different ideas, iterated on them and finally implemented them. The time it takes to write a good spec is about the same time it takes to build a prototype, so it was a perfect way to be creative and come up with solid solutions.

The CSS experience in VS2012 is so much better than it ever was and significantly raises the bar for CSS editors in the industry, IMHO. So what role would Web Essentials play and was it even needed in VS2012 and beyond? Well, not all prototypes made it in the product. Also, not all features from the original Web Essentials made it either.

Right-click in the CSS editor to perform document-wide fixes in Web Essentials 2012.

So, I’ve been slowly porting Web Essentials, piece by piece, to Visual Studio 2012 to test the CSS editor for the past 6 months. Combine that with all the prototypes and experiments that never made it into VS and you have a good starting point for the next version of Web Essentials. Oh, and throw in a more friendly and helpful version of CssCop into the mix too.

New message types helps identify browser compatibility problems and helps with best practices

The ultimate goal of Web Essentials have always been to increase developer happiness by exceeding the expectations of what you would think possible in a CSS editor. Providing big features that really make an impact is always fun and hopefully helpful as well. Smaller features and even smaller details can have an equally big impact and I think that is the theme of the new Web Essentials – details with a big impact.

Synchronizing values of vendor specific properties in Web Essentials 2012

Not everything in the original Web Essentials was about CSS. It contained features for both HTML and JavaScript. However, most of those features actually made it into VS2012. That’s great, but that doesn’t mean that there isn’t useful features to be added outside of CSS.

Mustache/Handlebar support in the HTML editor for JavaScript templating and data binding

This is the first post in a series about the upcoming Web Essentials 2012. Later I’ll go more into detail about the individual features (there’s a lot!) and show some code. This was a primer and an overdue answer to the question.

Web Essentials 2012 will be available when Visual Studio 2012 RTM is released.

Teaser: Check out the prototype in this Channel 9 video.

For the past few months, I’ve been looking at how to improve the web development experience in Visual Studio. This summer I released the Web Standards Update which brings HTML5 and CSS3 to Visual Studio, and a few weeks back Web Essentials was published.

This week I’ve been working on a proof of concept that eliminates the need for typing curly braces, colons and semi-colons when working with CSS. In non-English keyboard layouts, these characters can be rather difficult to type, because you need to use SHIFT and ALT to get to them.

Here is a quick demonstration of how to write CSS without the need for these characters.

I’ve been using this for about a day now on an English keyboard and I am so much more productive writing CSS. What I’m really interested in though, is whether or not YOU are when using this extension. Also, is it annoying, in your way, a waste of time, or the best thing EVAR!! Please try it out and let me know. I’d appreciate any feedback on this. Thank you!

Try it today!

Download the SpeedTyping extension for Visual Studio 2010 and let me know what you think on Twitter

Who knows, we might add this to the next version of Visual Studio…