Zen Coding support in WebStorm/PhpStorm
With the last WebStorm/PhpStorm EAP you can edit HTML and CSS code really fast usingZen 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.
