Zen Coding in Visual Studio 2015 using Web Essesntial Extension

Few months ago, I have added web essentials 2015 extension to my visual studio and studied its features. This is truly for web developers which makes their life easier. In this post we’ll see one of its great productivity booster feature and that is Zen Coding.

Zen Coding is a plug-in to generate HTML or CSS code in much faster way using jquery/css like selectors. Before we go into the detail let’s first install it in our visual studio.

Follow the below steps.

  • Open the visual studio.
  • Go to the Tools menu and click on Extensions and Updates menu item which will open one window.
    Web_Essesntials_Install
  • In the Extensions and Updates window, click on “Online” in the left pane. Once you click on it you got the list of extensions on the right side.

Web_Essesntials_Extension

  • Select the “Web Essesntials 2015” and click on “Download” button.

 

After installing this plug-in, it’s time to play with it.

Let’s say I want to generate simple table tr HTML. So here is how you can generate it with Zen coding.

table>tr>td

Now hit “Tab” key and it generate the following html code.

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

Now I want to generate table with 3 “tr” and 2 “td” with some content in each “td”.

table>tr*3>td{hello world}*2

Now hit “Tab” key and it generate the following html code.

<table>
    <tr>
        <td>hello world</td>
        <td>hello world</td>
    </tr>
    <tr>
        <td>hello world</td>
        <td>hello world</td>
    </tr>
    <tr>
        <td>hello world</td>
        <td>hello world</td>
    </tr>
</table>

As a web developer you know all the html tags but what is the use of “*”(star) and “{ }”(curly braces) in the above zen code ?

Well, there are some more characters available which will have its own usage in zen code. Let’s first understand each one with example.

1). “#” – Creates an Id attribute for specified tag.

Example

div#testId>span

Hit “Tab” key which will generate the following html code.

<div id="testId">
    <span></span>
</div>

 

2). “.” – Creates a class attribute for specified tag.

Example

div.inlineBlock>ul>li

Hit “Tab” key which will generate the following html code.

<div class="inlineBlock">
    <ul>
        <li></li>
    </ul>
</div>

 

3). “[]” – Creates a custom attribute for specified tag.

Example

div[title]>button[value=”Save”]

generates the following html.

<div title="">
    <button value="Save"></button>
</div>

 

4). “>” – Creates a child element after specified tag.

Example

div>p>img

generates the following html.

<div>
    <p>
        <img src="" alt="" />
    </p>
</div>

 

5). “+” – Creates a Sibling element.

Example

div>p>img+a

generates the following html.

<div>
    <p>
        <img src="" alt="" />
        <a href=""></a>
    </p>
</div>

 

6). “*n” – Creates the specified elements for n number of times.

Example

div>ul>li*2>a

generates the following html.

<div>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

 

7). “$$” – Generates the incremental numbers.

Example

table>tr#id$$*3>td

generates the following html.

<table>
    <tr id="id01">
        <td></td>
    </tr>
    <tr id="id02">
        <td></td>
    </tr>
    <tr id="id03">
        <td></td>
    </tr>
</table>

 

8). “{}” – Add the text inside the elements.

Example

div>p*4>span{This is my own text $$}

generates the following html.

<div>
    <p>
        <span>This is my own text 01</span>
    </p>
    <p>
        <span>This is my own text 02</span>
    </p>
    <p>
        <span>This is my own text 03</span>
    </p>
    <p>
        <span>This is my own text 04</span>
    </p>
</div>

 

9). “()” – Grouping the expression and generate HTML accordingly.

Example

table>(tr>th{column $$}*3)+(tr>td*3)

generates the following html.

<table>
    <tr>
        <th>column 01</th>
        <th>column 02</th>
        <th>column 03</th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

 

Apart from all of the above, you can now also add Lorem Ipsum text in your HTML Code. Simply type lorem and hit TAB and a 30 words of Lorem Ipsum text is inserted. If you want to add only 4 words of Lorem Ipsum then just type below code and hit “Tab” key.

div>p*4>lorem4

<div>
    <p>Amet, consectetur adipiscing elit.</p>
    <p>Fusce vel sapien elit.</p>
    <p>In malesuada semper mi.</p>
    <p>Id sollicitudin urna fermentum.</p>
</div>

You can find many more other features from its official web site.

That’s it for now. Hope you enjoy this post.

Advertisements

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