AppCode
CLion
DataGrip
GoLand
IntelliJ IDEA
MPS
PhpStorm
PyCharm
Rider
RubyMine
WebStorm
Toolbox App
.NET Tools
ReSharper C++
Space
TeamCity
Upsource
YouTrack
Datalore
Hub
Kotlin
Ktor
News
Team
JetBrains PlatformZen Coding support in WebStorm/PhpStorm
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.
Comments below can no longer be edited.
Metaller says:
March 2, 2010This is realy good news! Thank you very much!
TJ says:
March 4, 2010What 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.
Metaller says:
March 4, 2010It will be great, if there will full support of Zen Coding functions, like “Wrap with Abbreviation”.
Kenneth Younger says:
March 21, 2010I 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.
豪情 says:
January 7, 2012Ctrl+Alt+T and select “XML Zen Coding” and press “x”, then input something.
Ghuron says:
March 22, 2010I believe your installation instructions are correct only for Idea, not PHP Storm. Correct folder is “.WebIde10configtemplates”
Eugene.Kudelevsky says:
April 7, 2010The shortcut for Zen Coding is changed to control + shift + enter (complete statement action)
Eugene.Kudelevsky says:
April 20, 2010TAB shortcut is returned
vedariy says:
June 9, 2011When 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}
Rokrnpearl says:
March 7, 2012How 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:
nnmatveev says:
March 9, 2012Rokrnpearl,
Please submit an issue – http://youtrack.jetbrains.com/issues/WI#newissue=yes