# Emmet: escreva HTML 10x mais rápido
> Domine Emmet para codificar HTML 10x mais rápido no editor. Aprenda abreviações poderosas, snippets dinâmicos e atalhos para turbinar produtividade!
URL: https://dpw.dev/html/emmet/
Publicado em: 2020-06-29
Categoria: html
Autor: Tárcio Zemel
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.
[Vídeo no YouTube](https://www.youtube.com/watch?v=8p0gXmrRc5w)
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](https://emmet.io/) é 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](https://emmet.io/download/) 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](/css/o-basico-de-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:
```html
```
Ao se escrever `footer` e expandir, cria-se ``; `header`, ``; `p`, `` e; assim por diante.
Tem também alguns "especiais", como `bq` para ``.
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 ``.
O mesmo para IDs. Como exemplo, `#some-id` expande para ``.
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 ``; `aside#exclusive` para `` e; assim por diante (mas [atenção ao usar IDs](/css/nao-use-ids-como-seletores-css/)).
### 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 ``; `button[disabled]`, para ``; `td[title="Hello world!" colspan=3]`, ``; 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:
```html
```
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:
```html
```
### 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:
```html
```
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:
```html
```
### 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:
```html
```
### 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:
```html
```
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:
```html
Clica ni mim
```
Podendo, inclusive, ser usado várias vezes em uma mesma abreviação, como em `a>{Clica }+b{ni mim}`, que resulta em:
```html
Clica ni mim
```
E o caractere `$`, permite atribuir contadores textuais a abreviações com multiplicação, como no exemplo `ul>li*5>a{Item $}`, que resulta em:
```html
```
Que também pode ser usado fora da parte de conteúdo, como em `ul>li.item$*5`, que expande para:
```html
```
### 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:
```html
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum, mollitia.
- Placeat debitis ut, assumenda facere nostrum dolore quae hic harum!
- Optio itaque, iure vel quasi fuga quibusdam culpa facilis inventore?
- Magni quas voluptates minima magnam, ea eveniet dolor dolores possimus!
```
## 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](https://code.visualstudio.com/docs/editor/emmet) que mostrando todas as possibilidades.
Existem muito mais features e possibilidades oferecidas pelo Emmet. [Consulte a documentação oficial](https://docs.emmet.io/) 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. :)
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml