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 blog is permanently closed.
For up-to-date information please follow to corresponding WebStorm blog or PhpStorm blog.
This is realy good news! Thank you very much!
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.
It will be great, if there will full support of Zen Coding functions, like “Wrap with Abbreviation”.
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.
Ctrl+Alt+T and select “XML Zen Coding” and press “x”, then input something.
I believe your installation instructions are correct only for Idea, not PHP Storm. Correct folder is “.WebIde10configtemplates”
The shortcut for Zen Coding is changed to control + shift + enter (complete statement action)
TAB shortcut is returned
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}
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:
Rokrnpearl,
Please submit an issue – http://youtrack.jetbrains.com/issues/WI#newissue=yes