Post
Ask Question

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.

  1. <div class="row"></div>  
Let me demonstrate some more examples

Type div#main hit tab. (Example 2)
  1. <div id="main"></div>  
Type div>p hit tab (3)
  1. <div>  
  2.     <p></p>  
  3. </div>  
Type div#main.row>p.sub hit tab. (Example 3)
  1. <div id="main" class="row">  
  2.     <p class="sub"></p>  
  3. </div>  
Type li*5 hit tab. (Example 4)
  1. <li></li>  
  2. <li></li>  
  3. <li></li>  
  4. <li></li>  
  5. <li></li>  
Type li#item$*5 hit tab. (Example 5)
  1. <li id="item1"></li>  
  2. <li id="item2"></li>  
  3. <li id="item3"></li>  
  4. <li id="item4"></li>  
  5. <li id="item5"></li>  
Type div#main.row>div.sub>ul#list>li#item$*5 hit tab. (Example 6)
  1. <div id="main" class="row">  
  2.     <div class="sub">  
  3.         <ul id="list">  
  4.             <li id="item1"></li>  
  5.             <li id="item2"></li>  
  6.             <li id="item3"></li>  
  7.             <li id="item4"></li>  
  8.             <li id="item5"></li>  
  9.         </ul>  
  10.     </div>  
  11. </div>    
Type div#content>h1+p+p hit tab. (Example 7)
  1. <div id="content">  
  2.     <h1></h1>  
  3.     <p></p>  
  4.     <p></p>  
  5. </div>  
Type div#main.row>h1+p+p+div.sub>ul#list>li#item$*5 hit tab. (Example 8)
  1. <div id="main" class="row">  
  2.     <h1></h1>  
  3.     <p></p>  
  4.     <p></p>  
  5.     <div class="sub">  
  6.         <ul id="list">  
  7.             <li id="item1"></li>  
  8.             <li id="item2"></li>  
  9.             <li id="item3"></li>  
  10.             <li id="item4"></li>  
  11.             <li id="item5"></li>  
  12.         </ul>  
  13.     </div>  
  14. </div>     
Type div.container>(header>nav)+(div.row>div.col-lg-3*5) hit tab. (Example 9)
  1. <div class="container">  
  2.     <header>  
  3.         <nav></nav>  
  4.     </header>  
  5.     <div class="row">  
  6.         <div class="col-lg-3"></div>  
  7.         <div class="col-lg-3"></div>  
  8.         <div class="col-lg-3"></div>  
  9.         <div class="col-lg-3"></div>  
  10.         <div class="col-lg-3"></div>  
  11.     </div>  
  12. </div>    
Next Recommended Reading Customizing the Look and Feel of Visual Studio Editor using Visual Studio 2013 Color Theme Editor