Emmet, anteriormente conhecido como Zen Coding, é um plugin para editores de texto que adianta sua vida na hora de escrever HTML e CSS.

Pode explicar melhor?

Ele é um plugin que você pode instalar no seu editor de texto favorito e lhe dá o superpoder de escrever HTML através de seletores CSS. Isso mesmo, seletores CSS!

Você vai escrever div>img, vai apertar a tecla “TAB” e vai ver o seguinte código:

<div><img src="" alt=""></div>

Maravilha, não é? Ele também funciona com classes e ids conforme o exemplo abaixo:

div.wrapper>div#picture
<div class="wrapper">
    <div id="picture"></div>
</div>

Além de funcionar com seletores CSS, ele também possui algumas outras opções, como o operador “*”. Com ele você pode informar quantas vezes um determinado elemento deve se repetir, conforme o exemplo abaixo:

ul>li*3
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Há também o operador “$”, que funciona como um enumerador:

ul>li.item$*3
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

Você também consegue inserir texto dentro das tags utilizando chaves “{}”, conforme este exemplo:

ul>li.item${Este é o item $}*3
<ul>
    <li class="item1">Este é o item 1</li>
    <li class="item2">Este é o item 2</li>
    <li class="item3">Este é o item 3</li>
</ul>

Instalação

Confira a lista de editores suportados. É só clicar em cima do editor que você usa e você será levado a uma página no github ensinando a instalar.

Conclusão

Emmet lhe poupa um tempo considerável, que você passaria escrevendo linhas e linhas de HTML. Mas ele não para por ai, essas são apenas as principais features, além delas há muitas mais que você pode conferir aqui: docs.emmet.io/abbreviations/syntax/.

Para usar as abreviações dele para css, confira a documentação: docs.emmet.io/css-abbreviations/. Funciona de uma forma muito parecida com a que eu mostrei nos códigos acima, vai ser fácil de você assimilar.

Dúvidas, comentários ou sugestões, deixe logo abaixo :)