Simplify HTML Coding with Emmet for Visual Studio

As a developer I'm always on the lookout for new solutions, tools, or techniques that can both boost my productivity. In the past, I've written about techniques that developers can use to boost coding productivity, which includes the use of Visual Studio tooling plug-ins, snippet editors, and template solutions. Although most of the resources I've mentioned primarily benefits back-end coding, I've actually been keeping my eye on a cool solution for front-end HTML development.

HTML as a Declarative Construct

As web developers know all too well, HTML isn't a programming language. Instead, HTML is a markup that enables the communication of intentions. In other words, HTML lets developers declaratively define how they'd like data and information presented in a browser. How a browser ends up handling that declarative markup is, of course, a different story -- something that's caused developers no end of heartache throughout the years. Another problem with HTML is that it tends to be fairly wordy or verbose. Of course, part of that is due to HTML's legacy of descent from Standard Generalized Markup Language (SGML). I also can't help but think that all declarative languages also tend to end up being fairly verbose as a means to prevent declarations from being misconstrued (i.e., the more verbose your declarations are the less likely your intentions are mangled by whatever is interpreting them).

Although HTML isn't exactly something that I'd call unwieldy, it can sometimes take too much typing to bang out or define different scenarios. This is especially true when defining large blocks of content or when working through complex layouts. To that end, I've occasionally wondered if there's a better way to handle the generation of HTML markup. And, happily, there is a better way.

Writing HTML Code with Emmet

Since HTML markup is simply a bunch of semi-verbose code that defines a developer's intentions, it stands to reason that there might be a more terse way to, well, declaratively declare what you want your declarations to look like, which is where Emmet, formerly known as Zen Coding, comes into play. Rather than trying to explain how Emmet works, I'll provide you with a simple example. Assume that I declare the following:

div#segment>p.emphasized*3 

Emmit then instantly turns my declaration into full-blown markup, like so:

If you're used to HTML, CSS, and jQuery, then you'll find that Emmet is not only very intuitive to use, but also results in absurdly less time and effort to generate compared to the time it would have taken to bang out all of the necessary angle brackets, end-angle brackets, quotes, and so on. As such, if you're interesting in learning more about Emmet (as there actually is quite a bit more than this core component to transforming abbreviations into full-blown code), I'd recommend that you take a look at the official documentation.

Emmet for Visual Studio

As cool as Emmet is, it wasn't designed for Visual Studio. Instead, it targets a host different editors and platforms. However, there is a very nice and free plug-in for Visual Studio that seems to have captured the core functionality very well. The plug-in itself, Visual Studio Zen Coding 2012 is drop-dead easy to install and get up and running. There's also plug-ins for Visual Studio 2010 and Visual Studio 2008. After using the plug-in for just a bit, I'd honestly contend that this plug-in is only missing two things: a badge system that would reward you for increasingly cranking out more and more complex abbreviations (and I'm only half-joking about this) and potentially some way to make Emmet work with something such as C# code. Frankly, I'd really love the ability to pound out an entire interface with something like interace>string.Name>DateTime.Created, etc.

With that said, I'd argue that if you do any decent amount of front-end coding that you'll quickly find that you can't live without this plug-in. So take a few seconds to download and install it because Emmet really is an amazing way to boost HTML coding productivity.