Aumentando produtividade com Emmet

Disclaimer: Esse texto não tem pretensão de ser um guia e nem um passo-a-passo de como aprender algo. É apenas uma experiência compartilhada. Se foi útil pra você ou pode ser útil para alguém, deixe um coração :)

Por onde eu estive?

Olá! Como vocês estão? Sei que faz tempo que eu não escrevo, mas aqui estou novamente! Estava no período de provas e dei uma paradinha com o livro Eloquent Javascript(mas minha meta é terminá-lo e relatar minha experiência com ele, então fique ligado que logo vem mais…) e comecei um curso na Udemy que estou gostando bastante. Tive contato com Node.js, jQuery e Express. Tanto o Back quanto o Front são coisas bem legais pra mim, apesar do front me irritar às vezes haha.
Mas hoje eu quero falar sobre minha experiência com Emmet.

O que é Emmet?

O Emmet é uma maneira de você aumentar sua produtividade com HTML e CSS. Ele é nada mais, nada menos que um plugin que para seu editor de texto. Ele corta em muito o tempo necessário para se declarar tags

Como instalar o Emmet?

Aqui eu vou mostrar como instalei o Emmet no Sublime Text, que é o editor que uso. A instalação é bem simples e imagino que assim seja para qualquer editor de texto que você esteja usando.

Para instalar o Emmet no Sublime Text, faça o seguinte: Vá em Tools -> Command Palette(Ou aperte Ctrl+Shift+P). Em seguida, digite Package Control: Install Package e clique em cima dessa opção. Depois disso, pesquise por Emmet e clique nesse pacote e ele fará a instalação! Pronto, é só isso. Talvez você tenha que reiniciar o seu editor pra ele funcionar corretamente.

Primeiros Passos com Emmet

Ok, agora que você tem o Emmet instalando, vamos ao primeiro passo!
Crie um novo arquivo e chame ele de “example.html”(sem as aspas). Agora dentro desse arquivo, digite !(isso mesmo, só uma exclamação!) e aperte Tab.
Legal, né? Ele cria toda a estrutura que você precisa para começar a escrever seu HTML para você.

Mas vamos lá: Dentro do seu body, escreva ul>li e aperta Tab novamente.
O que acontece aqui é que quando você usa a seta, estamos dizendo que li é child do ul, e portanto, uma estará dentro da outra.
E se você não quiser uma tag dentro da outra? É só usar o sinal mais!
Por exemplo: Se você quiser uma div com um header dentro e um parágrafo, como você faria?

div>h1+p e apertar Tab. Pronto! Agora você tem um header e um parágrafo dentro de uma div.

Bom, resumindo até agora: Podemos dizer que a seta serve para denotar que um elemento é child do outro e o sinal de adição serve para denotar que um elemento é sibling do outro.
Dica: Seu cursor sempre tem que estar no final da sentença que você escreveu quando for apertar Tab!

ID e Class

ID e Class são corriqueiras no nosso uso de HTML e CSS, independente de estar usando algum Framework, como Bootstrap, ou não.
Os elementos que usamos para denotar ID e Class no Emmet são os mesmos do CSS, ou seja, # e .
Vamos supor que você está usando Bootstrap e quer criar um container. Como você pode fazer isso com o Emmet?
Muito simples: Basta escrever div.container e apertar Tab em seguida! O div se refere a própria tag e o .container denota que queremos uma class com o nome container.

Você já deve ter entendido como funciona para criar tags com ID também, né? Tenta aí como exercício.
E se quisermos uma tag com várias classes? É só declarar o nome da tag seguido das classes! Se quiser um p com a class text-center e class lead? Basta digitar p.text-center.lead e apertar Tab!

Multiplicação e Numeração de Itens

Imagine que você quer criar uma Unordered List com 10 elementos dentro. Com o que vimos até agora, a solução seria ul>li, apertar Tab e copiar o li dez vezes. Chato e trabalhoso. Qual seria a maneira legal e rápida de fazê-lo? Muito fácil: É só usar o multiplicador *.
A resposta seria ul>li*10. Ou seja: o li é copiado dez vezes e estarão dentro do ul. E se você quiser que todas tenham uma classe ou um ID também? Vou deixar pra vocês tentarem, mas aposto que vão conseguir, é bem fácil!

Agora vamos criar vários headers diferentes:

Imagine que queremos criar 4 headers, de h1 até h4, e queremos que o title do primeiro header seja title1, o do segundo seja title2 e assim por diante. E também queremos que o conteúdo de cada header seja “This is Header 1”, “This is Header 2”, etc…

Como podemos fazer isso de uma maneira rápida?

Resposta: h$[title=title$]{This is Header $}*4

O que está acontecendo ali?
O $ funciona como uma espécie de variável. O h$ vai formar um header que depende do valor de $. A chave denota o próprio conteúdo que vai dentro da tag e o *4 significa que o comando vai rodar do 1 até o 4.

Tente e veja na prática como isso acontece!

Próximos Passos…

Então por hoje é só! Esse foi bem rapidinho só pra vocês não acharem que eu morri ou que desisti de ser um Web Developer hahaha. São algumas anotações que eu achei que valeria a pena compartilhar. Acho que é legal pra despertar a curiosidade e até para algumas pessoas perceberem que existe esse tipo de coisa.
Logo logo pretendo voltar a escrever sobre meus estudos do Eloquent Javascript e até sobre os projetos que estou fazendo no FreeCodeCamp.
Se tiverem alguma dúvida, crítica ou feedback sobre o texto ou a estrutura em si, só deixar nos comentários!

Se quiserem continuar comigo nesse jornada, sigam-me(os bons e os maus) e fiquem ligados!
Se você ainda não conhece o Training Center, de uma olhada nesse artigo.
Se curtiu essa dica, da um like aqui no Medium e compartilhe esse post nas redes sociais.