Adventures in Engineering

Zen Coding in PhpStorm

Zen Coding in PHPStorm is AWESOME! I was first introduced to it by Zak Henry after my Building static sites with Sculpin talk at SydPHP back in May. Over the last month it’s been invaluable!

Zen mode is ultimately HTML completion from CSS selectors. Take this snippet for example

p>ul>li.menu-item>span    [TAB]

Typing the above line and pressing [TAB] will auto-complete into the following HTML code:

<p>
    <ul>
        <li class="menu-item"><span></span></li>
    </ul>
</p>

How is this useful you might add? Well I’ve gone from 23 characters to 76 characters WITH formatting! That’s just under 3x the speed in building HTML templates!

UPDATE

And now thanks to Zak’s helpful followup tweet, the following works too!

div#page>div.logo+ul#navigation>li*5>a     [TAB]

Any other helpful tweaks? Tweet them!

developerjack

Add comment