Usando Emmet snippets em arquivos jsx

Opa, vim aqui trazer uma dica de como escrever códigos HTML e CSS de maneira mais rápida usando Emmet snippets.

O que é Emmet?

Basicamente, é um kit de ferramentas de desenvolvimento para facilitar a escrita de HTML e CSS.

Por exemplo, o seguinte código:
div.cards$*3>p.description>a{cards $}

Cria a seguinte estrutura:

<div class="cards1">
  <p class="description"><a href="">cards 1</a></p>
</div>
<div class="cards2">
  <p class="description"><a href="">cards 2</a></p>
</div>
<div class="cards3">
  <p class="description"><a href="">cards 3</a></p>
</div>

Por padrão o Visual Studio Code já vem com essa funcionalidade ativada para arquivos HTML e CSS, mas não para arquivos do tipo jsx/tsx usados no React e no Next.

Como ativar o Emmet?

Usando o VSCode é bem simples, acessando as configurações em preferences > settings ou indo em view > Command Palette e digitar Preferences abra as configurações em modo JSON e adicione as seguintes linhas:

"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},

Com isso é só sair usando os Emmet snippets em seu código, o que pode te economizar muito tempo quando você se acostuma com ele.

Conclusão

Pode demorar um pouco para se acostumar, mas depois disso, você se torna muito mais produtivo. Como desenvolvedores, sempre buscamos meios de agilizar o nosso desenvolvimento, principalmente quando estamos com prazos apertados, quanto mais ferramentas disponíveis em nossas mãos melhor. Valeu pessoal!