Article image
JULIANA IASI
JULIANA IASI07/07/2021 16:59
Compartilhe

Criando um HTML muito mais rápido com VS Code

  • #HTML

Queria compartilhar com vocês uma dica que me ajudou demais a acelerar a produção de códigos html no VS Code. Descobri por meio do Código Fonte TV, nesse vídeo aqui.

Basicamente, o VS Code permite usar abreviações para criar as tags. Por exemplo, se eu digitar "!" e pressionar ENTER, veja a mágica:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

~MINDBLOW~

Outras possibilidades

Se eu digitar simplesmente ".nomedaclasse" e pressionar ENTER aparece:

<div class="nomedaclasse"></div>

Se eu quiser criar uma Section com a classe "container" e 4 divs abarcadas, sendo que cada div possui uma imagem e um link, basta escrever:

"section.container>div*4>img+a:link" e pressionar TAB:

<section class="container">
  <div><img src="" alt=""><a href="http://"></a></div>
  <div><img src="" alt=""><a href="http://"></a></div>
  <div><img src="" alt=""><a href="http://"></a></div>
  <div><img src="" alt=""><a href="http://"></a></div>
</section>

Ps.: Se você apenas copiar e colar não vai funcionar provavelmente, funciona quando você está digitando.

Legal, né? Recomendo verem o vídeo (se ainda não viram) que tem outras dicas nesse sentido. Que outros atalhos você conhece que te ajudam bastante na produção dos códigos?

Até a próxima!

Compartilhe
Comentários (7)
Gilvan Alves
Gilvan Alves - 24/02/2023 09:52

Esses recursos do VS Code ajudam muito na nossa produtividade! Gostei de conhecer Juliana! E a dica do Diogo Dantas do Lorem Ipsum eu não conhecia. Obrigado por compartilharem!

JULIANA IASI
JULIANA IASI - 08/07/2021 19:02

Que legal Diogo, obrigada por compartilhar!! Isso é bem útil hehe


Diogo Dantas
Diogo Dantas - 08/07/2021 09:39

Uma coisa legal que eu gostaria de compartilhar é o uso do texto pra encher linguiça Lorem Ipsum dentro do VS Code.


Se você no editor digitar lorem15 ele vai fazer a sequência do lorem ipsum com 15 palavras. Caso digite lorem*15 ele fará 15 parágrafos.


É bem útil quando é preciso estruturar o site com algum conteúdo dentro.

Vagner Bellacosa
Vagner Bellacosa - 07/07/2021 17:50

Juliana, excelente dica, parabens pelo compartilhamento.

Leandro Carvalho
Leandro Carvalho - 07/07/2021 17:34

Excelentes dicas Juliana e obrigado por compartilhar o link do vídeo.

Keila Ribeiro
Keila Ribeiro - 07/07/2021 17:30


Nossa isso ajuda a agilizar demais a construção dos códigos.

Não sabia, valew.

Ryam Alves
Ryam Alves - 07/07/2021 17:03

Olá Juliana! Dica muito boa, obrigado por compartilhar!