Zen Coding support in IntelliJ IDEA

With IntelliJ IDEA 9.0.2 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>.IntelliJIdea90configtemplates” folder (“~/Library/Preferences/IntelliJIDEA90/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 IDEA Community Edition, and its source code is freely available.

Comments below can no longer be edited.

10 Responses to Zen Coding support in IntelliJ IDEA

  1. Avatar

    Ted Wise says:

    March 1, 2010

    You guys really need to start providing OS/X paths for your tips. Because they don’t match at all.

    For OS/X users, copy the templates to ~/Library/Preferences/IntelliJIDEA90/templates.

  2. Avatar

    Mathias Leppich says:

    March 2, 2010

    yo, IntelliJ IDEA 9.0.2 is not released yet, right? Is it only available thru the early-access-program?
    I just wonder because with my 9.0.1 the simple things like “TAG.CLASS” and “TAG#ID” don’t work…

    Anyway, really nice feature (when it works)!

  3. Avatar

    Eugene Kudelevsky says:

    March 2, 2010

    Yes. Now Zen Coding is only available in IntelliJ IDEA EAP.

  4. Avatar

    Deny Prasetyo says:

    March 4, 2010

    Thats is wonderful news. i have been tried zen coding for intellij IDEA 9.0.1 but it’s features not fully working only additional Code templates.

  5. Avatar

    Jari says:

    March 8, 2010

    XML Zen Coding is a total mess. It is now enabled by default and at took me a lot of time to find out what the hell is happening. It was impossible to edit XML files because of the crap this plugin tries to insert.

    Please disable it by default.

  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 shorcut is returned

  8. Avatar

    Esset says:

    May 3, 2010

    This is surely another great addition to IntelliJ! Love it!

    But is there any way of getting the Zen output formatted properly, e.g. to get nested blocks on new lines (and properly tabbed)?

    What I want is:
    “div.randomClass>div.anotherRandomClass*3” to output

    tt(… content …)

    Is this possible somehow? I tried modifying the Zen templates and add the formatting there, but that only works for tags that aren’t nested…

    (I’ve browsed through the documentation and Googled it, but can’t find any solution…)


  9. Avatar

    Esset says:

    May 3, 2010

    Hm, my HTML tags seemed to have been stripped there. But there’s supposed to be div tags after the tab characters anyway… 🙂

    I hope you understand it anyway!

  10. Avatar

    bd says:

    August 13, 2010

    but, how can i us it in idea 8 ?

Discover more