ZenCoding extension for Visual Studio 2010 review

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:

Assign a keyboard shortcut to the ExpandZen command

Assign a keyboard shortcut to the ExpandZen command


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

Quote style for attributes


Custom shortcuts options

Custom shortcuts options


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

 

 

Organize Visual Studio tabs with Tabs Studio add-in

This entry was posted in Reviews and tagged , . Bookmark the permalink.

2 Responses to ZenCoding extension for Visual Studio 2010 review

  1. Zen Coding is great! it’s a huge time saver I didn’t realise you Could get it on VS2010

  2. this is way better than the one version i’ve been limping along with for the past two years. thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s