Zen Coding with Visual Studio

What is Zen Coding?

According to Wikipedia

Zen Coding is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist.

We now have Zen coding in visual studio 2013, Thanks to Web Essentials. If web essentials is not in your visual studio, don’t worry just add it . Zen coding will allow you to expand small snippets of code that are written in very terse syntaxes into HTML. There is no need to type brackets, class equals etc.

For example (Example 1)

If you want to create a div with class “row”, I can type div.row and then press tab key. Zen coding will automatically generate one div with class row.

<div class="row"></div>

Let me demonstrate some more examples

Type div#main hit tab. (Example 2)

<div id="main"></div>

Type div>p hit tab (3)

<div>
<p></p>
</div>

Type div#main.row>p.sub hit tab. (Example 3)

<div id="main" class="row">
<p class="sub"></p>
</div>

Type li*5 hit tab. (Example 4)

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

Type li#item$*5 hit tab. (Example 5)

<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>

Type div#main.row>div.sub>ul#list>li#item$*5 hit tab. (Example 6)

<div id="main" class="row">
<div class="sub">
<ul id="list">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
</div>
</div>

Type div#content>h1+p+p hit tab. (Example 7)

<div id="content">
<h1></h1>
<p></p>
<p></p>
</div>

Type div#main.row>h1+p+p+div.sub>ul#list>li#item$*5 hit tab. (Example 8)

<div id="main" class="row">
<h1></h1>
<p></p>
<p></p>
<div class="sub">
<ul id="list">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
</div>
</div>

Type div.container>(header>nav)+(div.row>div.col-lg-3*5) hit tab. (Example 9)

<div class="container">
<header>
<nav></nav>
</header>
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
</div>
</div>

6 Comments

Join the conversation! Your thoughts help the community grow.

Gowtham Rajamanickam11y ago
well explained..
Mahesh Chand11y ago
Nice Tom. It would be nice to see the output of the code. Cheers!
- Mahesh Chand11y ago
  You're welcome, Tom. Appreciate all the hard work young guys are doing, learning and sharing.
- Tom Mohan11y ago
  Thanks Mahesh Chand for your great support
Tom Mohan11y ago
Thanks ROHAN PANDEY
ROHAN PANDEY11y ago
Nice