Zen Coding support in WebStorm/PhpStorm

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