3

Criando um HTML muito mais rápido com VS Code

#HTML
JULIANA IASI
JULIANA IASI

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!

4
44

Comentários (6)

0
JULIANA IASI

JULIANA IASI

08/07/2021 19:02

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


1
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.

1
Vagner Bellacosa

Vagner Bellacosa

07/07/2021 17:50

Juliana, excelente dica, parabens pelo compartilhamento.

1
Leandro Carvalho

Leandro Carvalho

07/07/2021 17:34

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

1
K

Keila Ribeiro

07/07/2021 17:30


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

Não sabia, valew.

2
Ryam Alves

Ryam Alves

07/07/2021 17:03

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

Front End Designer / UI Developer / Web designer

Brasil