Speed Coding
Becoming an efficient developer sometimes requires us to spend a little time to learn a few shortcuts. And here Emmet is helping us. Emmet is a plug-in which ships with VS Code and provides shorthand notations for HTML when writing code in .html files.
Shortcut Features Include:
- HTML Page Template
- Elements
- Sibling Elements
- Child Elements
- Grouping
- Climb Up
- Multiple Elements
- Class & ID's
- Adding Text
- Custom Attributes
- Numbering
- Tag Attributes
- Place Holder Text
Note: To accept the emmet shortcut, press "Tab" or "Enter. And to skip all the suggestions, press "Esc" or adding a space will remove the list.
HTML Page Template
To add the new page boilerplate code, insert:
!
And then enter to get:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Elements
Type any element tag name
h1
To get the closing and opening tags
<h1></h1>
Sibling Elements
Use +
header+footer
To add element on the same level
<header></header>
<footer></footer>
Child Elements
Use >
header>nav
To add a nested element
<header>
<nav></nav>
</header>
Grouping
Use ()
header+(main>section)+footer
To group elements
<header></header>
<main>
<section></section>
</main>
<footer></footer>
Climb Up
Use ^ to escape a level of nesting
header+main>section^footer
To escape a level of nesting
<header></header>
<main>
<section></section>
</main>
<footer></footer>
Multiple Elements
Use *
ul>li*4
To multiply the number of elements
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Class & ID's
Use .
nav.my-nav
To add a class
<nav class="my-nav"></nav>
And #
nav#my-id
To add an ID
<nav id="my-id"></nav>
Adding Text
Use {}
button{Click Me}
To add text between the tags
<button>Click Me</button>
Custom Attributes
Use []
button[data-id=btn-id]
To add a custom attribute inside the tag
<button data-id="btn-id"></button>
Numbering
Use $
ul>li*3#my-item${I'm number $}
To add numbering for the element
<ul>
<li id="my-item1">I'm number 1</li>
<li id="my-item2">I'm number 2</li>
<li id="my-item3">I'm number 3</li>
</ul>
Tag Attributes
Use :
script:src
To add attributes
<script src=""></script>
Place Holder Text
Use :
lorem6*3
To add chunks of dummy text
Lorem ipsum dolor sit amet consectetur.
Expedita quasi aspernatur velit commodi repellendus?
Voluptas voluptatibus numquam et nam ratione.
See the video for more explanation and check out the "Emmet Cheat Sheet" for more examples.
And make sure you start using shortcuts to accelerate your coding!
Top comments (1)
Thank you very much for helping me! i was in need of this for sooooooooooooooooooooooooooooooooooooooooooooooo Long :D Thanks again dev.to