Zen Coding in Visual Studio 2012 | John Papa

John Papa

Evangelist on the loose

Zen Coding in Visual Studio 2012

...

Zen Coding is a faster way to write HTML using a CSS style selector syntax, and you can now use Zen Coding in Visual Studio via the Web Essentials 2012 plug in (v1.7).  Zen Coding was introduced by Sergey Chikuyonok in 2009 (according to Smashing Magazine) and has been updated over time to become a great way to write monotonous HTML much more efficiently.
Special thanks  to Mads Kristensen and his team at Microsoft for adding Zen Coding to Visual Studio 2012 via Web Essentials 2012 (along with many other great features).

Quick Reference

Here is a quick list of the Zen Coding features that are now supported in Visual Studio 2012 via the Web Essentials 2012 plug in

  • # creates an id attribute
  • . creates a class attribute
  • [ ] creates a custom attribute
  • > creates a child element
  • + creates a sibling element
  • ^ climbs up
  • * is element multiplication. This creates the same thing n number of times
  • $ is replaced with an incremental number
  • $$ is used for numbers with padding
  • { } creates text in an element
What can you do? Here is an example:
<!-- Type this -->
ul[data-bind="foreach:customers"]>li*4>span{Caption $$}+input[type=text data-bind="value:$$"]

<!-- Creates this -->
<ul data-bind="foreach:customers">
    <li><span>Caption 01</span><input type="text" value="" data-bind="value:01" /></li>
    <li><span>Caption 02</span><input type="text" value="" data-bind="value:02" /></li>
    <li><span>Caption 03</span><input type="text" value="" data-bind="value:03" /></li>
    <li><span>Caption 04</span><input type="text" value="" data-bind="value:04" /></li>
</ul>
Let’s take a closer look at the different symbols used

ID and Class Attributes: # and .

You can create an element and assign it an id or class attribute using CSS style syntax.
<!-- Type this -->
div#contentRegion.address

<!-- Creates this -->
<div id="contentRegion" class="address"></div>

Custom Attributes: [ ]

You can create any attribute the square bracket syntax.
<!-- Type this -->
div[title]

<!-- Creates this -->
<div title=""></div>
Or create multiple attributes and fill in values
<!-- Type this -->
input[placeholder="Name" type="text"]

<!-- Creates this -->
<input type="text" value="" placeholder="Name" />

Child Elements: >

Create an element and then a child element inside of it. In this example I create a div with the id=menu that contains a span with a class=item and a blank title attribute
<!-- Type this -->
div#menu>span.item[title]

<!-- Creates this -->
<div id="menu">
    <span class="item" title=""></span>
</div>

Sibling Elements: +

You can create a sibling element easily too.
<!-- Type this -->
footer>div>a+input

<!-- Creates this -->
<footer>
    <div>
        <a href=""></a>
        <input type value="" />
    </div>
</footer>

Climbing Elements: ^

The > operator descends into element hierarchy while the ^ climbs up the hierarchy. You can also climb multiple levels. For example: use 1 ^ to climb 1 level or use 4 ^ to climb 4 levels.
<!-- Type this -->
footer>div>a+input^^p

<!-- Creates this -->
<footer>
    <div>
        <a href=""></a>
        <input type value="" />
    </div>
    <p></p>
</footer>

Multiplication: *

Create n number of elements
<!-- Type this -->
ul>li*4>span

<!-- Creates this -->
<ul>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>

Item Numbering: $

When using the multiplication to create n number of elements, you can add an incremental number to them using the $. Notice that using multiple $ operators (ex: $$) creates pads the numbers with 0’s.
<!-- Type this -->
section>article.item$$*4

<!-- Creates this -->
<section>
    <article class="item01"></article>
    <article class="item02"></article>
    <article class="item03"></article>
    <article class="item04"></article>
</section>

Text: } {

You can enter text values inside of elements, without changing the parent context.
<!-- Type this -->
ul>li*4>span{Caption $$}

<!-- Creates this -->
<ul>
    <li><span>Caption 01</span></li>
    <li><span>Caption 02</span></li>
    <li><span>Caption 03</span></li>
    <li><span>Caption 04</span></li>
</ul>
This does not change the parent context, so when specifying the sibling to follow the text, the sibling element will actually follow the element prior to the text. That’s why the example below creates an anchor tag next to the span tag.
<!-- Type this -->
ul>li*4>span{Caption $$}+a{click me}

<!-- Creates this -->
<ul>
    <li><span>Caption 01</span><a href="">click me</a></li>
    <li><span>Caption 02</span><a href="">click me</a></li>
    <li><span>Caption 03</span><a href="">click me</a></li>
    <li><span>Caption 04</span><a href="">click me</a></li>
</ul>

Combining Them all

You can combine multiple features together which allows you to write some pretty cool HTML much faster. You can even use this to create some Knockout.js bindings for templates, and then just change the property names.
<!-- Type this -->
section[data-bind="foreach:customers"]>div*4>input[type="text" data-bind="text:$$"]

<!-- Creates this -->

<section data-bind="foreach:customers">
    <div>
        <input type="text" value="" data-bind="text:01" />
    </div>
    <div>
        <input type="text" value="" data-bind="text:02" />
    </div>
    <div>
        <input type="text" value="" data-bind="text:03" />
    </div>
    <div>
        <input type="text" value="" data-bind="text:04" />
    </div>
</section>

Grouping: ( )

Grouping is a powerful feature of Zen Coding that allows you to create complex expressions. It is not yet in Web Essentials 2012, but I assume it will come in the near future. If it does arrive, you would be able to create entire sections of a DOM very easily.
<!-- Type this -->
div>(header>div)+section>(ul>li*2>a)+footer>(div>span)

<!-- WOULD create this (not yet supported in Web Essentials 2012)-->
<div>
    <header>
        <div></div>
    </header>
    <section>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </section>
    <footer>
        <div>
            <span></span>
        </div>
    </footer>
</div>
As you can see, this would make it quite simple to create large sections of HTML with just a few keystrokes.

Lorem Ipsum Generator

(Added Dec 5, 2012)

You can now generate Lorem Ipsum directly in the HTML editor. Type “lorem” and hit TAB and a 30 word Lorem Ipsum text is inserted. Type “lorem10″ and a 10 word Lorem Ipsum text is inserted.

ul>li*5>lorem3

References

tags: html html5 visual studio 2012 web essentials zen coding
  • Driggs

    Awesome! Too bad Zen is being replaced by Emmet, seems like bad timing…

  • eric

    Microsoft should develop and contribute to https://github.com/sergeche/emmet-sublime and add it to the supported IDE’s. Doing their own offshoot will only cause resentment from dev’s if it is not a one for one match to Emmet.

  • http://www.rowanbeach.com Stephen W

    This is a great addition to the web essentials toolkit, great stuff :)

  • Hans

    John Papa is becoming a bleading edge Html5 Developer :-)

    Could you make your influence in the Microsoft Space to
    push the Html5-Boilerplate initiative. (Webmatrix is providing
    a Html5-Sitetemplate!

  • Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1229

  • Flash

    I had an issue trying to figure out how to “expand” the zen coding to html. In case I’m not the only one, press the tab key. Yeah I know, I should have figured it out…

    • Luke

      Thank you. This actually helped me, I couldn’t figure it out either!

  • http://madskristensen.net Mads Kristensen

    Eric, we don’t create our own version of Emmet, but implement the standard defined by the Sublime project. The reason why we can’t implement the official Emmet code into VS is because it’s writing in Python which can’t run natively in VS.

  • Dominik

    Is it also possible to use this for other tags like , or does this only apply to vanilla html? I was unable to get the prefix in front.

    By the way, this typo is a little confusing at first look:
    “features that are no supported” ;)

    • John

      Dominik, my comments form seems to be encoding HTML so I did not catch what tag you were referring to.

      Thanks on the typo :)

      • Dominik

        Heh, indeed. I was asking for ASP.Net tags like
        asp:Literal id=”..” runat=”server”

        • John

          Ah, yes. It appears the colon is the cuplrit here. The rest could be done. AFAIK, there is no escape char. But Mads is the guy to ask about this issue

          • http://madskristensen.net Mads Kristensen

            ASP.NET control syntax is not supported by ZenCoding at all. That’s not the same as Web Essentials can’t add some level of support. I’ve added it to my backlog. Thanks!

  • Pingback: Links of the week | Jan @ Development

  • Olaf Keijsers

    Hello John, great article. Can’t wait to get used to this ;)

    While experimenting with this, I came across the following thing. I tried to create a table with 4 columns including a header. After that there should be a table row with four cells in it. However, when I use multiplication, it multiplies everything that comes after it. Is there a way to state “I only want to multiply these parts”?

    This is what I tried to use:
    table>thead>th{$$}*4^^tr

    Expanding this will turn it into a table with a header with 4 elements, and then four rows where I only wanted one.

    Something else:
    table>thead>th+th+th+th^^tr>td+td+td+td

    This will expand into a table with a header with 4 elements and then (after the header) will be 4 cells. The table row element seems to have disappeared. Am I doing something wrong?

    Thanks!

    • Samuel

      Olaf,

      table>thead>tr>th{$$}*4

  • Dominik

    Thanks for the article, I really love this feature!

    Another really great extension of Zen in VS would be intellisense support for the css names.

  • http://www.pankajnikam.net Pankaj Nikam

    This is simply great. It will save a lot of typing and in turn we will be more productive when it comes to coding. Thanks a lot for this share. And thanks to Mads Kristensen for such awesome add-on to VS 12 :)

  • Hoisel

    It’s not working in vs2012 rc with vs2010 installed on same machine…

  • Richard Beverly

    One thing that seems to be missing compared to plugins I’ve used with NP++ and VS2010 is the ability to surround selected existing markup with the output of an expression. Does this functionality exist? If not, it would be a nice addition. Thanks! (I also love the simplicity of expanding with a simple and familiar Tab press)

  • Paul

    Very impressive :)

    There seems to be an issue with lists containing sibling elements. e.g. div>ul>li*5>span+div only adds the nested div to the first li, and not the other 4. Nesting the sibling elements in a container div doesn’t work either (div>ul>li*5>div>span+div).

  • Alexander Popov

    Please, help me start unsing Zen Coding in Visual Studio. I installed the Web Essentials plug-in, but how do I start using Zen Coding. I mean, when I write, for example, div nothing happens. What other settings do I need to do? I am using VS 2012. Thanks for the help.

    • Nathan Fisher

      Alexander,
      you need to press tab for it to work, much like the way snippets work in the rest of VS.

  • Daniel

    Thanks for the plugin. I have found few problems:

    1- html>body>table>tr*8>td*3>lorem9 will create table with 8 rows and three columns each with Lorem text.

    2- html>body>table>tr*8>td*3>lorem30 will create the same table by this time the last column of each row is empty.

    3- html>body>table>tr*8>td*3>lorem90 this time only first column has text!!

    4- html>body>table>tr*8>td*3>lorem900 now the text is back in all three rows.

    Please fix the inconsistency issues.

  • Pingback: Zen Coding for Visual Studio 2012 « Vijay's blog

  • Pingback: Annonce d’intérêt public : Installez Web essentials | frenchcoding

  • Pingback: SharePoint 2013 Development & Performance » Web Essentials 2012 – Visual Studio Extension

  • http://www.tiagocesar.com/ Tiago César

    There’s a little error at “Climbing elements”, as the pattern “footer>div>a+input^^p” will produce markup with the outside of the … block, opposite to the code block shown above. I verified this through Web Essentials 2012 in VSS 2012. Other than that, Zen Coding is great!

  • Carlos López

    AWESOME!!!! like, really awesome, i had been using WebEssential for a while now and i just discovered this. Will save quite a lot of time creating the structure of JQuery tabs, but while testing this, i found that

    div#tabs>ul>(li>a[href="#tabsDetalle-$$$"])*3^div[id="tabsDetalle-$$$"]*3

    will produce

    As you can see, the id’s and the href numbers are not incremented, like one would expect

    • Carlos López

      Found out how to solve the problem with the ‘a ‘ element

      div#tabs>ul>li*3>a[href="#tabsDetalle-$$$"]^^div[id="tabsDetalle-$$$"]*3

      will produce

      But still, there’s the issue with the id’s

    • Carlos López

      LOL, comment system is removing my link tags

  • Greg Gum

    Grouping is now supported in the 2013 version.

%d bloggers like this: