O que é Emmet e como ele vai adiantar MUITO o seu dia a dia! – Dica rápida

Tempo de leitura 2 minutos

O Emmet (antigo Zen Coding) é um recurso disponível para MUITOS editores de texto e IDEs. O objetivo dele é escrever menos, simples assim.

Embora tenha suporte a XML e até CSS, o Emmet da um show de verdade no HTML, em vez de escrever tags completas usamos “atalhos” mais simples e que irão gerar tudo de forma controlada.

Um exemplo bem prático:

Quer saber quando novos artigos forem publicados? Assine a newsletter!

No gif, vemos como o Emmet cria o HTML todo da página de forma rápida e prática, vou deixar os comandos do Emmet que usei logo a seguir, assim você pode refazer meus passos.

# Gera o template HTML
html:5

# Gera um H1 com conteúdo "Hello Emmet"
h1{Hello Emmet}

# Gera uma tabela completa com tags filhas
# conteúdo numerado (usando o $)
# é possivel "voltar" algumas tags com ^
table>thead>tr>th*3{header $}^^tbody>tr>td*3{item $}

Aqui você ve mais comandos suportados pelo Emmet

https://docs.emmet.io/

Instalação do Emmet

O Emmet é bem simples de instalar, em MUITOS casos acaba sendo um simples plugin para o editor ou IDE ou até já vem ativado (como no Visual Studio Code).

Se tiver dúvidas sobre a sua ferramenta preferida, consulte esta página de Download:

https://emmet.io/download/

Ativar Emmet para arquivos JSX (Javascript) no Visual Studio Code (VS Code)

Essa é uma boa dica. Por algum tempo eu só aceitei que o Emmet não rolaria no VS Code com JSX. Até que me revoltei de tanto escrever “HTML” “na mão” (me superei, dois termos com aspas duplas… seguidos).

É bem simples ativar o Emmet para o React no Visual Studio Code, é só abrir as configurações (ctrl/command + ,) ir em Extensions > Emmet e procurar por Edit in settings.json.

Agora só acrescente iso ao arquivo e salve:

{
   "emmet.includeLanguages": {
      "javascript": "javascriptreact"
   }
}

E pronto.

#ficaADica

E se você quiser ser avisado sobre novos artigos, assine a newsletter do blog.