DEV Community

Cover image for Master VS Code Emmet Shortcuts
balaji s
balaji s

Posted on

Master VS Code Emmet Shortcuts

#vscode #emmet #html #css

Write HTML and CSS 10x Faster

If you spend hours manually typing out opening tags, closing tags, and CSS properties, there is a much better way. Built right into Visual Studio Code is a powerful tool called Emmet.

Emmet allows you to write shorthand abbreviations and expand them into complete, complex HTML and CSS code instantly with a single keystroke. Whether you are a beginner looking to speed up your workflow or an experienced developer wanting to cut down on repetitive typing, mastering Emmet is a game-changer.

What is Emmet?

Emmet is a toolkit for web developers that turns simple CSS-like selectors into fully-fledged markup. Best of all, Emmet is built directly into VS Code by default—no extensions or plugins required!

When you type an abbreviation and press Tab (or Enter, depending on your settings), VS Code instantly translates your shortcut into clean, formatted code.

Essential HTML Emmet Shortcuts (With Examples)

Here are the most practical Emmet shortcuts you will use every day when building web pages.

1. The Ultimate Starter: The HTML5 Boilerplate

Instead of copying and pasting a standard HTML skeleton every time you start a new file, just type an exclamation point and hit Tab.

  • Shortcut: !
  • Result: 
<!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>
Enter fullscreen mode Exit fullscreen mode

2. Elements with IDs and Classes

You can create tags instantly by combining the tag name with # for IDs and . for classes.

  • Shortcut: div#main
  • Result: 
<div id="main"></div>
Enter fullscreen mode Exit fullscreen mode
  • Shortcut: section.container
  • Result: 
<section class="container"></section>
Enter fullscreen mode Exit fullscreen mode

(Pro Tip: If you just type .card, Emmet defaults to a div, giving you <div class="card"></div>!)

3. Nesting Elements (The > Operator)

Want to put elements inside other elements? Use the greater-than sign (>).

  • Shortcut: ul>li>a
  • Result: 
<ul>
    <li><a href=""></a></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

4. Multiplication (The * Operator)

Need multiple elements, like a list of items? Multiply them easily.

  • Shortcut: ul>li*3
  • Result: 
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

5. Adding Text Content Inside Tags (Using {})

You can inject text directly into your tags using curly braces.

  • Shortcut: button{Click Me}
  • Result: 
<button>Click Me</button>
Enter fullscreen mode Exit fullscreen mode

Combined Example:

  • Shortcut: ul>li.item*3{List Item}
  • Result: 
<ul>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

6. Numbering Items with the Dollar Sign ($)

When creating multiple elements, you can automatically number them using $.

  • Shortcut: ul>li.item-$*3{Item $}
  • Result: 
<ul>
    <li class="item-1">Item 1</li>
    <li class="item-2">Item 2</li>
    <li class="item-3">Item 3</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Essential CSS Emmet Shortcuts

Emmet isn't just for HTML—it works wonders in CSS files too by using shorthand abbreviations that expand into full property-value pairs.

Shortcut Expands To Example / Description
m10 margin: 10px; Quick spacing
p20 padding: 20px; Quick padding
df display: flex; Flexbox setup
aic align-items: center; Align flex items vertically
jcc justify-content: center; Justify flex items horizontally
w100 width: 100px; Set width (or w100% for percentages)
bgc background-color: #000; Quick background color
fz16 font-size: 16px; Font sizing

Official Emmet Documentation

you can follow the link to learn more emmet shortcuts

docs.emmet.io

Summary: Your Cheat Sheet to Remember

Goal Shortcut Example
Boilerplate !
Class / ID div.wrapper, span#header
Child element header>nav>ul
Multiple tags div*4
Text inside h1{Hello World}
Numbering p.text-$*2

Conclusion

Emmet takes a little bit of muscle memory to get used to, but once it clicks, it will save you thousands of keystrokes every single week. Start by incorporating just one or two shortcuts into your workflow today—like the ! boilerplate or .class shortcuts—and work your way up to complex nested structures.

What is your favorite Emmet shortcut to use in VS Code? Let us know in the comments below!

Top comments (0)