Turbinando a escrita de código com Emmet no VSCode

Esse post é especial pra você que se sente desmotivado só de pensar em escrever código HTML, CSS ou JS… Chegou a hora de turbinar isso usando o Emmet no VScode.

Em algum momento, o Bill Gates disse uma daquelas frases que chocam todo mundo e vai parar nesses sites de “frases”:

Eu escolho uma pessoa preguiçosa para fazer um trabalho árduo, porque uma pessoa preguiçosa encontrará uma maneira fácil de fazer isso.

Bill Gates

Na minha humilde opinião, esse tipo de frase faz um certo sentido mas carrega um pouco de exageiros que na prática podem ser bastante perigosos. Mas… nosso assunto aqui é código! Então, vamos ver uma forma mais rápida para preguiçosos de escrever código.

De onde veio isso?

O Emmet antes chamava Zen Coding e foi iniciado em 2008 com a proposta de ajudar os desenvolvedores escrever código com maior velocidade. Apesar de ter caido no gosto da galera recentemente, esses plugins já são relativamente maduros e a sua inserção dentro dos principais editores de texto atuais fez com que sua utilização se tornasse muito popular.

Curiosidade: Emmet é uma palavra que originalmente significava formiga, um pequeno inseto que pode carregar mais de 50 vezes seu peso. Esta palavra também é semelhante a “emitir”, que é basicamente o que Emmet faz quando expande abreviações.

Veja aqui uma referência

Mãos no código

Para usar o Emmet no VScode basta você instalar o editor de texto e ele já está pronto para usar, diferentemente de outros editores de texto como o sublime, por exemplo, em que você precisa instalar um pacote e configurar o editor.

Lembre-se que esse tutorial é apenas um overview, portanto o emmet tem muitas outras funções que não são discutidas aqui. Para acessar essas funções eu recomendo esse documento.

Para usarmos de maneira mais fácil as abreviações do Emmet, precisamos lembrar que elas são feitas para simplificar sua vida. Um “truque” aqui é lembrar dos seletores de CSS, visto que as abreviações do Emmet algumas vezes se parecem com eles. Outro ponto legal é que quando estamos digitando algo no VScode o editor te sugere possíveis opções, você pode navegar por elas com as setas do teclado e ao teclar “Tab”, ele fará um autocompletar com a opção escolhida;

Tá gostando do conteúdo? Ele faz parte de um conjunto de artigos sobre desenvolvimento web que estão aqui no site. Dá uma olhada lá!

Por exemplo:

• Para adicionar um comentário, é só digitar c + “Tab”;

• Adicionar uma tag de h1, por exemplo, digitamos: h1 e apertamos “Tab”, e ele expande para

<h1></h1>

• Adicionar várias tags em seguida, digitamos: h1+p+div e “Tab”, e ele expande para

<h1></h1>
<p></p>
<div></div>

• Adicionar uma linha abaixo, sem ter que mover o cursor até o final da linha atual: “Ctrl” + “Enter”;

• Adicionar uma linha acima: “Shift” + “Ctrl” + “Enter”;

• Adicionar uma tag com um id, digitamos: div#identificador e o “Tab”, e ele expande para

<div id="identificador"></div>

// Obs: se não especificarmos o elemento e digitarmos apenas #nome, ele presume que seria uma tag <div>

• Adicionar uma tag com uma classe, digitamos: p.classe e o “Tab”, e ele expande para

<p class="classe"></p>

• Adicionar uma lista ordenada com 3 itens dentro, digitamos: ol>li*3 e o “Tab”, e ele expande para

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

// Para mover o cursor para o próximo <li>, só apertar o "Tab"

• Para alternar entre vários arquivos dentro do VSCode, digitamos: “Ctrl” + P, para abrir uma janela de localização, e digitamos qualquer parte do nome do arquivo ou até mesmo sua extensão, e em seguida apertamos “Enter”. Pronto, ele abrirá o arquivo escolhido;

• Para linkar o arquivo CSS ao arquivo HTML, por exemplo, digitamos, logo após a <title>, link e o “Tab”, e ele expande para

<link rel="stylesheet" href="">

Numeração dinâmica

O Emmet permite adicionar uma classe com uma numeração que é “dinâmica”. Para isso você deve digitar: ul>li.item$*5 – e ele se expande para:

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

Abrevie tags HMTL com vários parâmetros

Algumas tags, possuem vários parâmetros, mas calma… o emmet vai te ajudar. Use por exemplo o a:link, ele expande para:

<a href="http://"></a>

O mesmo acontece para o input:number

<input type="number" name="" id="" />

button:submit ou button:s ou btn:s, expande para:

<button type="submit"></button>

Cuidados ao usar o emmet

Apesar do emmet ser maravilhoso, ao meu ver existe um alerta válido que precisa ser feito. As vezes a sintaxe do emmet começa a se tornar complexa virando praticamente expressões matemáticas, por exemplo:

(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

Não necessariamente isso é prejudicial, se você tem facilidade com isso… vá em frente e use! Mas, as vezes pode ser mais produtivo você pensar em seu código em pequenas partes tantando seguir o fluxo mais natural na sua cabeça do que ficar pensando em expressões assim.

Outro ponto importante é que quanto mais você se acostuma a usar uma ferramenta, mais você se acomoda e abstrai aquela habilidade. Se você trocar de editor de texto, será que você saberia a sintaxe de todos os elementos que foram abreviados pelo emmet?