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.

This entry was posted in New Features and tagged , , , . Bookmark the permalink.

10 Responses to Zen Coding support in IntelliJ IDEA

  1. Ted Wise says:

    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. Mathias Leppich says:

    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. Eugene Kudelevsky says:

    Yes. Now Zen Coding is only available in IntelliJ IDEA EAP.
    http://confluence.jetbrains.net/display/IDEADEV/Maia+EAP

  4. 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. Jari says:

    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. Eugene Kudelevsky says:

    the shortcut for zen coding is changed to control + shift + enter (complete statement action)

  7. Eugene Kudelevsky says:

    TAB shorcut is returned

  8. Esset says:

    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

    t
    tt(… content …)
    t

    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…)

    Thanks!

  9. Esset says:

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

    but, how can i us it in idea 8 ?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">