O Visual Studio Code (VS Code) já traz suporte integrado ao Emmet Abbreviations (também chamado apenas de Emmet). Trata-se de um conjunto de abreviações que facilita e agiliza a escrita de HTML, CSS e outras linguagens.
Por exemplo, inicie um novo documento no VS Code e digite
!
Algo semelhante aparecerá. Aperte enter.
E a mágica acontece:
Um segundo exemplo.
Apague tudo e digite
html
Aparecerá o menu semelhante a esse
Só escolher a opção com a seta do teclado e dar enter.
Que o código aparecerá:
Vanessa L. Gallo tem um tutorial simples de utilização do Emmet.
- Adicionar uma tag de h1, por exemplo, digitamos: h1 e apertamos “Tab”, e ele expande para
- Adicionar várias tags em seguida, digitamos: h1+p+div e “Tab”, e ele expande para
- 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”;
Para saber mais, leia o tutorial feito por ela.
Tutorial Básico Emmet
https://www.computersciencemaster.com.br/turbinando-a-escrita-de-codigo-com-emmet-no-vscode/
Cheat-sheet – Lista de atalhos do Emmet
Uma lista de exemplos com os principais usos do Emmet.
https://docs.emmet.io/cheat-sheet/
Documentação Emmet Abreviations no Visual Code
https://code.visualstudio.com/docs/languages/emmet
Emmet Abbreviation – Dicas de produtividade no VS Code (Digite código 2x mais rápido)
Configurar o VS Code para colocar lang=”pt-BR” por padrão no Emmet.
Mais informações sobre o VS Code.
Temas do VSCode
https://vscodethemes.com/
VSCode: Dicas e truques
https://cursos.alura.com.br/extra/alura-mais/vscode-dicas-e-truques-c1054
VisualStudio Code: instalação, teclas de atalho, plugins e integrações
https://www.alura.com.br/artigos/visualstudio-code-instalacao-teclas-de-atalho-plugins-e-integracoes
Introdução: VSCode — extensões mais usadas
https://www.alura.com.br/artigos/vscode-extensoes-mais-usadas
Extensões VS Code: descubra quais são as mais usadas
https://www.alura.com.br/artigos/extensoes-vs-code-descubra-as-mais-usadas
