May 13, 2021
Emmet shortcuts allow me to code faster in Visual Studio Code! These are the ones I use the most!
1. Boilerplate HTML (The '!' at the very beginning of a HTML page)
Type:
!
Result:
<!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> 2. Import the CSS Stylesheet
Type:
link:css
Result:
<link rel="stylesheet" href="style.css">
3. Write tags
Type:
p
Result:
<p></p>
4. Lorem Ipsum
Type:
lorem50
Result:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident voluptatibus numquam aspernatur necessitatibus ab odit ipsam delectus vel sapiente architecto dolores cum velit quis et magni, aperiam saepe mollitia nobis suscipit temporibus illo eius voluptatem nulla! Eligendi molestiae unde earum impedit sunt deleniti quaerat error? Veritatis deserunt tenetur eos laborum?
5. Paragraphs of lorem ipsum
Type:
(p>lorem5)*2
Result:
<p>Lorem ipsum dolor sit amet.</p>
<p>Non sapiente accusamus at eum?</p>6. Div with a class
Type:
.hero-class
Result:
<div class="hero-class"></div>
7. Div with an id
Type:
#hero-id
Result:
<div id="hero-id"></div>
8. Parent div and child div
Type:
section>p
Result:
<section>
<p></p>
</section>9. Combine them all!
Type:
ul.list>(li>lorem5)*10
Result:
<ul class="list">
<li>Lorem ipsum dolor sit amet.</li>
<li>Inventore culpa vel quod labore!</li>
<li>Aspernatur iste exercitationem ratione quo?</li>
<li>Aspernatur magnam quia molestiae veniam.</li>
<li>Eius, debitis? Beatae, veritatis tempora.</li>
<li>Asperiores, deserunt. Non, recusandae praesentium.</li>
<li>Veritatis excepturi illum sequi inventore.</li>
<li>Explicabo alias minus fuga porro.</li>
<li>Pariatur voluptatibus fugit sequi suscipit.</li>
<li>Adipisci aperiam totam vitae laborum?</li>
</ul>