Zen Coding for Visual Studio 2012

Don’t wait, head over to VS extensions gallery and grab hold of Web Essentials 2012 by Mads Kristensen. The extension offers good amount of features for VS based developers, of all of them the one I am going to talk about is the Zen Coding style introduced by Sergey Chikuyonok (as mentioned in JohnPapa.net).

Before I proceed further Zen Coding style has been implemented across various text editors, and if you are a full time or regular web developer you should have a look into it. For all the supported text editors check out the Wikipedia entry at http://en.wikipedia.org/wiki/Zen_Coding#Text_editors.

Once you have installed Web Essentials 2012, you will have support for coding in Zen Coding style development inside of Visual Studio 2012. The main idea behind the coding style is to reduce the manual typing process of creating the mundane html code for your web application. It is kind of text expansion mechanism, but it is much more than that.

Lets start with few examples:

1. Create a normal div tag

1
2
3
4
5

<!-- When you type -->
div <!-- Press TAB -->

<!-- created content is -->
<div></div>

as simple as that. In the above example itself you have skipped over typing all the angle brackets and the end tag of the div.

2. Create a list of items / multiplication * and item numbering $

1
2
3
4
5
6
7
8
9

<!-- When you type -->
ul>li{Item $$}*3

<!-- created content is -->
<ul>
	<li>Item 01</li>
	<li>Item 02</li>
	<li>Item 03</li>
</ul>

Check out that you can repeat items using the syntax li*3 which simply creates that many items and you can specify what you would want to go inside the tag by using the curly braces. So li{hi} would create:

1

<li>hi</li>

Also note that you can access the current index of the element using $ symbol, and when you use $$ it does the padding for you.

3. Provide id #, class . and custom attributes []

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- When you type -->
div.row>div.twelve.columns>div#header>h1[style="text-decoration: underline"]{User Management}

<!-- created content is -->
<div class="row">
	<div class="twelve columns">
		<div id="header">
			<h1 style="text-decoration: underline">User Management</h1>
		</div>
	</div>
</div>

4. Sibling elements: +

I am sure by now you understand that > creates child elements, similarly for creating siblings you can use the + element

1
2
3
4
5
6
7
8
9

<!-- When you type -->
a[href="mycompany.com"]>img[src="logo.png"]+div{MyCompany}

<!-- created content is -->
<a href="mycompany.com">
	<img src="logo.png" alt="" /><div>
		MyCompany
	</div>
</a>

5. Climbing elements: ^

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- When you type -->
p>div.header{Header goes here}+div.body{Body text}>div.footnote^a[href="link"]{myLink}

<!-- created content is -->
<p>
	<div class="header">
		Header goes here
	</div>
	<div class="body">
		Body text<div class="footnote"></div>
	</div>
	<a href="link">myLink</a>
</p>

6. Lorem Ipsum generator lorem3

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- When you type -->
ul>li*5>lorem3

<!-- created content is -->
<ul>
	<li>Lorem ipsum dolor.</li>
	<li>Sit amet, consectetur.</li>
	<li>Adipiscing elit fusce.</li>
	<li>Vel sapien elit.</li>
	<li>In malesuada semper.</li>
</ul>

Unfortunately, as of Web Essentials 2012 v2.3.1 grouping is not supported yet. So you may want to write to Kris about the same and request for the feature.

Overall Zen Coding style saves a lot of mundane typing that comes with html file development, and I hope this helps you as much as it has helped me.

Do check out Web Essentials as it is much more than an extension which supports Zen Coding style.