ZenCoding, o HTML com turbo!

O ZenCoding é um plugin para editores de texto com o fim de tornar a escrita do html mais rápida. Trata-se de uma forma de abreviar o código que se expande em um bloco pronto para você por o conteúdo.

Se você trabalha com html, certamente já está acostumado com vários padrões que sempre utiliza e, as vezes, faz um copy/paste de algum outro arquivo aberto para ganhar tempo, afinal escrever tags similares repetidamente não é a tarefa mais agradável do mundo.

Com o ZenCoding você só precisa escrever uma expressão, que será expandida para a estrutura desejada, por fim você também poderá criar suas próprias abreviações personalizadas.

Se você conhece bem html o entendimento da sintaxe deve ser trivial, então vamos aos exemplos :

A linha abaixo:

div#header>div.menu>ul>li.selected+li*5

Resulta em:

<div id="header">
<div class="menu">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

Muito legal, não é mesmo? Então vamos sofisticar um pouco mais:

div#leftmenu>img.logo+h1+(ul.menu$*3>li#item$*6)+p.copyright

Se transforma em:

<div id="leftmenu">

<img src="" alt="" class="logo" />
<h1></h1>
<ul class="menu1">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<ul class="menu2">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<ul class="menu3">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<p class="copyright"></p>
</div>

Mais exemplos com os fontes e detalhes de instalação podem ser encontrados no site oficial.

Edit: o Zen Coding foi renomeado como Emmet, e a página oficial do projeto possui os plugins e código fonte para download. O Emmet já vem instalado por padrão em alguns editores de texto, como o Visual Studio e VS Code.

O github do projeto também vale a visita.