Emmet in Visual Studio Code
Emmet is a built-in feature in Visual Studio Code.
When you start typing an Emmet abbreviation, you will see the abbreviation displayed in the suggestion list in the form of a dropdown. If you type the short form (like element name) then you will see a preview of the expansion.
HTML Boilerplate
Use ! to create basic HTML boilerplate
<!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>
Child >
Use > operator to nest elements inside each other.
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
Sibiling +
Specify sibiling using + operator.
div+p+a
<div></div>
<p></p>
<a href=""></a>
Multiplication *
Generate multiple tags using *
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Grouping
Group tags instead of traversing by climbing
div>(header>ul>li*2)
<div>
<head>
<ul>
<li></li>
<li></li>
</ul>
</head>
</div>
Id and class
div.container
<div class="container"></div>
div#wrapper
<div id="wrapper"></div>
Lorem Ipsum
Lorem10
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, eius?
Text {}
Use Curley braces ({}) to add text to element
a{click me}
<a href="">click me</a>