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!
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!
Que legal Diogo, obrigada por compartilhar!! Isso é bem útil hehe
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.
Juliana, excelente dica, parabens pelo compartilhamento.
Excelentes dicas Juliana e obrigado por compartilhar o link do vídeo.
Nossa isso ajuda a agilizar demais a construção dos códigos.
Não sabia, valew.
Olá Juliana! Dica muito boa, obrigado por compartilhar!