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.

This entry was posted in Cool Feature and tagged , , . Bookmark the permalink.

11 Responses to Zen Coding support in WebStorm/PhpStorm

  1. Metaller says:

    This is realy good news! Thank you very much!

  2. TJ says:

    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. Metaller says:

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

  4. 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.

  5. Ghuron says:

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

  6. Eugene.Kudelevsky says:

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

  7. Eugene.Kudelevsky says:

    TAB shortcut is returned

  8. vedariy says:

    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. Rokrnpearl says:

    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. nnmatveev says:


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

Leave a Reply to Kenneth Younger Cancel reply

Your email address will not be published. Required fields are marked *