Emmet Crash Course

Emmit is a code snippets manager for VS Code. It is used to create HTML code faster. Emmit is a must-have tool for any web developer. In VS Code, Emmit is enabled by default. It works only after you have created a new HTML file.

Learn the shortcuts and just press the tab or enter key to get the code you want.

Some common Emmit shortcuts

! - Inserts a <!DOCTYPE html> tag
h1 - Inserts a <h1> tag
h2 - Inserts a <h2> tag
p - Inserts a <p> tag
img - Inserts an <img> tag
a - Inserts an <a> tag
ul - Inserts an <ul> tag
ul>li - Inserts a <li> tag inside an <ul> tag
ul>li>a - Inserts an <a> tag inside a <li> tag inside an <ul> tag
ul>li*3 - Inserts 3 <li> tags inside an <ul> tag
div - Inserts a <div> tag
div>p - Inserts a <p> tag inside a <div> tag
div>p*3 - Inserts 3 <p> tags inside a <div> tag

ID and Class

# - Inserts an id attribute
. - Inserts a class attribute

Example:

#my-id - Inserts an id attribute with the value my-id
.my-class - Inserts a class attribute with the value my-class

div>(header>ul>li*2>a)+footer>p1 - expands into

  <div>
    <header>
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </header>
    <footer>
      <p></p>
    </footer>
  </div>

Grouping

div>(header>ul>li*2>a)+footer>p - Inserts a <div> tag with a <header> tag inside it, a <ul> tag inside it, and 2 <li> tags inside the <ul> tag. Then it inserts an <a> tag inside each <li> tag. Finally it inserts a <footer> tag and a <p> tag inside it.

Yep, it can go little bit crazy. But you don’t have to worry about it. Rarely you will need to use it.

CSS shortcuts

style - Inserts a <style> tag
pos - Inserts a position property
pos:absolute - Inserts a position property with the value absolute
bgc - Inserts a background-color property
bgc:red - Inserts a background-color property with the value red
ma - Inserts a margin:auto property

Conclusion

Emmit is a must-have tool for any web developer. BUT this does not mean you have to learn every single shortcut. You can use Emmit to create HTML code faster. NO ONE remembers all the shortcuts. We use then mostly by trial and error, and learning them as we go.

Start your journey with ChaiCode

All of our courses are available on chaicode.com. Feel free to check them out.