Emmet: escreva HTML 10x mais rápido

Nossa querida e amada Linguagem de Marcação de Hipertexto, às vezes chamada de HTML, constitui a base da própria Web. Mas sua escrita, convenhamos, não é das mais rápidas. Felizmente, existem soluções como Emmet para ajudar muuuito na hora de escrever HTML.

Então, se você ainda não sabe o que é o Emmet e/ou quer saber como instalar e usar o Emmet, nas mais diversas linguagens, continue lendo.

O que é Emmet

Devs com vestígios de pêlos grisalhos no corpo provavelmente se lembram do Zen Coding, um plugin (para diversos editores/IDEs) que facilitava bastante a escrita do HTML, provendo abreviações poderosas, snippets dinâmicos e diversos atalhos para escrever HTML.

Já o Emmet é um plugin (para diversos editores/IDEs) que facilita bastante a escrita do HTML, provendo abreviações poderosas, snippets dinâmicos e diversos atalhos para escrever HTML…

Coincidência? Eu acho que não.

Origens à parte, fato é que o poderoso Emmet oferece uma série de vantagens/funcionalidades, como:

• Abreviações baseadas na sintaxe de CSS. A adaptação ao Emmet é praticamente automática, já que sua sintaxe é inspirada nos seletores de CSS (qualquer dev front-end sabe como usar antes de usar);
• Snippets dinâmicos. Cada abreviação é transformada em tempo de execução, apenas sendo preciso pequenas alterações em nomes para se obter resultados diferentes;
• Codificação ultra-rápida. Com o Emmet, é possível escrever rapidamente um monte de código, envolver trechos com novas tags, percorrer rapidamente e selecionar partes importantes e muito mais;
• Customização. É possível adicionar facilmente novos trechos e ajustar a experiência do Emmet com apenas alguns arquivos JSON;
• Plataforma para novas ferramentas. Emmet é open souce, permitindo alterações no código-fonte e reutilizção de seus módulos para criar ações novas e exclusivas.

Como instalar o Emmet

Emmet é um plugin disponível para diversos editores, IDEs e plataformas. Independentemente de sua preferência na hora de codificar, é provável que haja a possibilidade de você se beneficiar de tudo de bom que o Emmet oferece.

Algumas dessas versões do Emmet são oficiais, enquanto outras são oferecimentos third-party que, às vezes, não contemplam todas suas características.

Então, por exemplo, se você quer usar Emmet no Sublime Text ou Eclipse/Aptana, trata-se de um plugin oficial, com todas as funcionalidades; se for usar Emmet no VS Code ou Vim, trata-se de um third-party.

Lembrando que o Emmet também está disponível em serviços e plataformas online, como Codeanywhere, CodePen, JSFiddle e muitos outros.

De qualquer maneira, basta acessar a página de download do Emmet para baixar a versão apropriada ao seu IDE/Editor de preferência — em alguns casos, já até vêm pré-instalado; consulte a documentação de seu Editor ou IDE favorito.

Como usar o Emmet

O foco desta explicação é mostrar como escrever HTML até 10x mais rápido, mas não necessariamente limitando-se a arquivos .html, já que ele pode prover suporte de uso (a depender do editor/IDE) em diversos tipos de arquivo, como .html, .haml, .pug, .jsx, .css, .scss, .sass, .less e linguagens como .handlebars e .php.

Então, já sabe: até usar Emmet com React e PHP é possível.

E se leu com atenção a listagem de formatos acima, pode ter se perguntando que raios de utilidade teria usar o Emmet em arquivos de CSS e pré-processadores, como Sass, mas a verdade é que — atenção, segure-se na cadeira! — Emmet também oferece suporte a abreviações em CSS.

Sim, é possível também usar o Emmet para estilo, otimizando para uma fita k7, mas agora o foco é como escrever HTML mais rápido, então esse assunto fica para um outro artigo.

Uma coisa importante é o termo “expandir“. Comumente, quando se escreve uma abreviação com Emmet, para se obter o resultado final é preciso acionar um trigger (geralmente, Tab); quando isso acontece, dizemos que “houve uma expansão”, que “o código expandiu” ou coisas desse tipo.

E por quê esse termo? É uma convenção. Nada mais.

Sem mais delongas, partamos para como usar o Emmet e conhecer sua sintaxe e algumas possibilidades de abreviações.

Elementos

A funcionalidade mais básica do Emmet é fazer expansão em nomes de tags/elementos.

Por exemplo, ao se escrever main e expandir, cria-se:

Ao se escrever footer e expandir, cria-se <footer></footer>; header, <header></header>; p, <p></p> e; assim por diante.

Tem também alguns “especiais”, como bq para <blockquote></blockquote>.

O interessante é que, ao fazer a expansão, o cursos já se posiciona no ponto ideal para continuar a escrita da estrutura HTML. Não dá para exemplificar nesses exemplos de código, mas assista ao vídeo no início do artigo para ver exatamente como é a coisa.

Classes e IDs

Aqui, a inspiração na sintaxe de CSS começa a ficar evidente.

Ao digitar algum nome precedido de . (ponto), ocorre uma expansão para uma div (elemento default) com atributo de classe preenchido exatamente com o nome em questão.

Por exemplo, .some-class expande para <div class="some-class"></div>.

O mesmo para IDs. Como exemplo, #some-id expande para <div id="some-id"></div>.

E para esse tipo de expansão para outros elementos? Simples, basta preceder o . ou # com o nome da tag que se quer.

main.l-main expande para <main class="l-main"></main>; aside#exclusive para <aside id="exclusive"></aside> e; assim por diante (mas atenção ao usar IDs).

Atributos

“Qualquer dev front-end sabe como usar o Emmet antes de usar o Emmet”.

Enquanto minha camiseta com essa frase não fica pronta, adivinhe qual a abreviação necessária para atributos. Lembre-se: é de inspiração no CSS.

Sem manter o suspense, a sintaxe para atributos é usar a sintaxe [attr].

Então, span[tabindex="0"] expande para <span tabindex="3"></span>; button[disabled], para <button disabled></button>; td[title="Hello world!" colspan=3], <td title="Hello world!" colspan="3"></td>; etc.

Aninhamento

Uma das funções mais úteis, poderosas e favoritas da comunidade Emmet: aninhamento.

Com aninhamento, o real poder do Emmet começa a ser liberado, permitindo criar estrutura mais completas e complexas.

Através de > é possível estipular quantos níveis de profundidade forem necessários para uma estrutura HTML desejada.

Após a expansão de ul>li>a, obtém-se:

Já com o cursor dentro das aspas do atributo href, prontinho para receber o URL; depois de escrever, ao apertar Tab, ele já pula para entre as chaves de abertura e fechamento para que o texto do link seja informado.

Tava achando que era brincadeira (ou clickbait) quando afirmamos ser possível escrever HTML até 10x mais rápido usando o Emmet?

Seletor-irmão

E se existe a possibilidade de criar estruturas aninhadas, vem muito a calhar ser possível também trabalhar com seletores-irmão através de +.

Por exemplo, ao escrever div+p+bq e expandir, obtém-se:

Subida

A subida (ou climb-up), feita com ^, é um recurso que muitos dos usuários de Emmet desconhecem. Juntamente com aninhamento e seletor-irmão, ela permite compor abreviações ainda mais poderosas para resultados ainda mais surpreendentes.

Por exemplo, div+div>p>span+em^bq expande para:

Perceba que foi-se fazendo uma estrutura com irmãos e descendentes e, ao se chegar no em, voltou-se um nível na hierarquia para a inclusão do bq, fazendo dele irmão de p.

É possível usar quantas subidas forem necessárias, como o caso de div+div>p>span+em^^^bq expandir para:

Multiplicação

Essa é uma possibilidade do Emmet que também consta no rol de preferências da comunidade e, com certeza, você também vai gostar bastante.

Através do caractere * é possível fazer a multiplicação de seletores que constarão na expansão.

Lembra do exemplo mais acima ul>li>a? Se precisasse de múltiplos item de lista, bastaria usar ul>li*5>a para obter:

Agrupamento

E para fechar o quarteto de abreviações para estruturas complexas de HTML com Emmet, temos o agrupamento, que, através de () (parênteses), permite fazer grupamentos de abreviações (algo como “subabreviaturas”).

Um exemplo é div>(header>ul>li*2>a)+footer>p, que faz a expansão para:

10x mais rápido, amigo. 10x mais rápido.

Texto/Contador

Também estão disponível alguns facilitadores a mais, como a possibilidade de já incluir texto diretamente nas abreviações através de {} (chaves).

Um exemplo bem simples para entender é a{Clica ni mim}, que expande para:

Podendo, inclusive, ser usado várias vezes em uma mesma abreviação, como em a>{Clica }+b{ni mim}, que resulta em:

E o caractere $, permite atribuir contadores textuais a abreviações com multiplicação, como no exemplo ul>li*5>a{Item $}, que resulta em:

Que também pode ser usado fora da parte de conteúdo, como em ul>li.item$*5, que expande para:

Gerador de Lorem Ipsum

E para quem gosta de um bom placeholder textual na interface, acabou-se a necessidade de ter que visitar sites geraores de lorem ipsum ou instalar plugins em seu editor ou IDE: Emmet tem um gerador nativo de lorem ipsum.

Digitando somente lorem, obtém-se 30 palavras de “lorem ipsum” na expansão:

E estamos falando de um gerador, propriamente dito, então, sempre vão aparecer palavras diferentes em cada geração.

Também é possível especificar precisamente quantas palavras se quer, usando um contador como no exemplo lorem10, que gera 10 palavras loremipsunianas na expansão.

Claro, é possível combinar o gerador de lorem ipsum nas abreviações para conseguir resultados bem legais, como ul.c-list>lorem10.c-list__item*4, que gera:

Conclusão

Uma das características citadas do Emmet é sua capacidade de ser customizado/expandido facilmente através de simples arquivos JSON.

Geralmente, na documentação de seu editor/IDE constará como é feita essa customização e com quais arquivos e parâmetros você deve ser preocupar.

Por exemplo, se for usar Emmet no VS Code, existe uma página na documentação que mostrando todas as possibilidades.

Existem muito mais features e possibilidades oferecidas pelo Emmet. Consulte a documentação oficial para conhecê-las e realmente saber porque ele é um queridinho da comunidade front-end.

Mas só por essa palhinha do que é possível já foi comprovado: com Emmet, realmente é possível escrever HTML 10x mais rápido. Ou mais. :)