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:
<main></main>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:
<ul> <li><a href=""></a></li></ul>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:
<div></div><p></p><blockquote></blockquote>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:
<div></div><div> <p><span></span><em></em></p> <blockquote></blockquote></div>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:
<div></div><div> <p><span></span><em></em></p></div><blockquote></blockquote>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:
<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li></ul>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:
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer></div>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:
<a href="">Clica ni mim</a>Podendo, inclusive, ser usado várias vezes em uma mesma abreviação, como em a>{Clica }+b{ni mim}, que resulta em:
<a href="">Clica <b>ni mim</b></a>E o caractere $, permite atribuir contadores textuais a abreviações com multiplicação, como no exemplo ul>li*5>a{Item $}, que resulta em:
<ul> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li></ul>Que também pode ser usado fora da parte de conteúdo, como em ul>li.item$*5, que expande para:
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li></ul>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:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?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:
<ul class="c-list"> <li class="c-list__item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum, mollitia.</li> <li class="c-list__item">Placeat debitis ut, assumenda facere nostrum dolore quae hic harum!</li> <li class="c-list__item">Optio itaque, iure vel quasi fuga quibusdam culpa facilis inventore?</li> <li class="c-list__item">Magni quas voluptates minima magnam, ea eveniet dolor dolores possimus!</li></ul>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. :)