Share via


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.

Adding Class

If you want to create a div with class “row”, type div.row and then press the Tab key. Zen Coding will automatically generate one div with a class row. 

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

Let see some more examples

Id for a Tag 

 Type div#main hit tab. (Example 2)

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

Type div>p hit tab (3)

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

Combined

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>

See Also

Other References