VS2013 Web Essentials - Zen Coding is a huge time saver for web developers

As a web developer, I have regularly found myself needing to type a large amount of HTML layout code. Your page starts to grow, and your eyes begin to glaze over as you type DIV after DIV.

Enter Zen Coding. In a nutshell, ZenCoding is a set of editor extensions, allowing a developer to use shorthand for common tasks. Microsoft have incorporated these extensions into Web Essentials for Visual Studio 2013.

I can't overstate how awesome this feature is. For example, if I type:

...and then hit the tab key, I get:

A div has been added for me. But what if I need to add a CSS Id?

We can add a CSS class too:

Maybe we need some test data to check our layout? Zen even supports Lorem Ipsum!

This part is cool. What if we want 3 table rows, each with 2 columns? (yes, I know, you all use pure CSS now - not tables)..

If you find it isn't working after installing Web Extensions, make sure you are using the release copy of Visual Studio 2013 (the latest version of Web Extensions doesn't work with VS2013 pre-release). Let me know if you find more handy short cuts.