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:

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
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:
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