ZenCoding extension for Visual Studio 2010 speeds up HTML coding expanding short Zen commands into full-fledged HTML code. For example, to create a 2*3 table in HTML you type “table>(tr>td*3)*2” and press expand:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

You can generate id and class properties with the CSS like syntax:

p#myid.myclass   ->
<p id='myid' class='myclass'></p>

You can even use the counter variable $ to number output elements:

ul>li.item$*2   ->
<ul>
  <li class='item1'></li>
  <li class='item2'></li>
</ul>

Zen Coding is supported for many editors (see the official zen-coding page). The Visual Studio 2010 extension was developed by Yngve B. Nilsen and described in details on his blog.

After the installation you will see the additional ZenCoding submenu in the main Visual Studio menu. You can generate a test paragraph by typing p and clicking ZenCoding – Expand Zen. For convenience it is highly recommended to assign a keyboard shortcut to this command:

ZenCoding has its own options to customize the quote style and create custom shortcuts:


ZenCoding is a free extension for Visual Studio 2010. You can download it from Visual Studio Gallery.