Zen Coding support in WebStorm/PhpStorm

With the last WebStorm/PhpStorm EAP you can edit HTML and CSS code really fast using Zen Coding features.

To use it, you have to install Zen Coding plugin for Web IDE/IntelliJ IDEA: go to Zen Coding Project Download Page, download an archive that contains a set of live templates, and extract it to “<Your Home Directory>.WebIde10configtemplates” folder (“~/Library/Preferences/WebIde10/templates” for Mac OS X).

  • Zen Coding plugin involves more than 200 different HTML and CSS live templates. To see all of them, just open Settings (Ctrl+Alt+S), Live Templates, Zen Coding group.
  • Native Zen Coding support allows you to generate HTML structures using complex templates. For example, try to type “form.form-comment#comment>fieldset” in an HTML file and then press TAB. In this case, “form” and “fieldset are live templates but you can use simple tag names instead.
  • You can generate not only HTML but also XML structures. Basic features perfectly work for XML.
  • “TAG.CLASS” and “TAG#ID” templates allow you to specify class and id of HTML elements, but you can specify a value of any XML/HTML attribute, i.e. you can write “person[name=Jack]“.
  • You can use your own live templates as parts of complex templates. For example, suppose you have a template “entry” with the following template text: To generate a list of entries, you just need to type “entry-list>entry[number=$]*5″ and press TAB. By default, the “number” attribute will be generated before “type”. If you want to customize the position where it’s generated, add ATTRS variable to your template – for example: ATTRS variable must have empty string as a default value and should be skipped:
  • Of course, you can disable Zen Coding support if you don’t need it (see Settings (Ctrl+Alt+S), XML Zen Coding).

To learn more about Zen Coding features, you can watch screencasts on Zen Coding project home page.

Note that Zen Coding native support is a part of IntelliJ IDEA Community Edition, and its source code is freely available.

Comments below can no longer be edited.

11 Responses to Zen Coding support in WebStorm/PhpStorm

  1. Avatar

    Metaller says:

    March 2, 2010

    This is realy good news! Thank you very much!

  2. Avatar

    TJ says:

    March 4, 2010

    What about HAML support like in RubyMine? I personally prefer HAML to Zen and it would make sense to include HAML since SASS is also supported.

  3. Avatar

    Metaller says:

    March 4, 2010

    It will be great, if there will full support of Zen Coding functions, like “Wrap with Abbreviation”.

  4. Avatar

    Kenneth Younger says:

    March 21, 2010

    I am also curious if there is possibility for supporting the other shortcuts such as “Wrap with Abbreviation”. To me, this is really where the power of Zen Coding lies.

    • Avatar

      豪情 says:

      January 7, 2012

      Ctrl+Alt+T and select “XML Zen Coding” and press “x”, then input something.

  5. Avatar

    Ghuron says:

    March 22, 2010

    I believe your installation instructions are correct only for Idea, not PHP Storm. Correct folder is “.WebIde10configtemplates”

  6. Avatar

    Eugene.Kudelevsky says:

    April 7, 2010

    The shortcut for Zen Coding is changed to control + shift + enter (complete statement action)

  7. Avatar

    Eugene.Kudelevsky says:

    April 20, 2010

    TAB shortcut is returned

  8. Avatar

    vedariy says:

    June 9, 2011

    When will last version of ZEN coding (0.7) be implemented?
    It is very “must to have” version. Look at:

    p>{Click }+a{here}+{ to continue}

  9. Avatar

    Rokrnpearl says:

    March 7, 2012

    How do I use full function of Zen Coding in PhpStorm like other softwares did.
    In Sublime Text 2, after press Ctrl+Alt+Enter, the bottom box will show up & easily to type the code below:

    (header>img[src=”logo.png” alt=”logo”])+(nav>ul>li.nav_$$$*2)+(article>section*2>aside)+(footer>div.footer_$$*3)

    In PhpStorm happened error after inserting & press Tab, no “popup box” or no “shortcut” to type this code correctly, and result I was given:

    html:5>(header>img[src=”logo.png” alt=”logo”])+

    < ….

    Image of comparison I uploaded:

  10. Avatar

    nnmatveev says:

    March 9, 2012


    Please submit an issue – http://youtrack.jetbrains.com/issues/WI#newissue=yes