In this post I give an overview of Emmet and how you can use it in VS Code.

What is Emmet?

Emmet is an add on to a text editor that uses CSS like expressions which can speed up writing boilerplate primarily in HTML, XML and CSS but can be extended to other programming languages.

It is easy to confuse code snippet functionality found in many text editors with Emmet. Where Emmet excels is that it can be extended at run time. Suppose you find yourself repeating this HTML block a lot:

<div>
    <ul>
        <li></li>
    </ul>
</div>

Whilst a code snippet would help alleviate the drudgery of typing this over and over again, what about when you need three list items or five or ten? Further snippets and extra cognitive load on remembering how to recall the correct one means this approach doesn’t scale. Emmet makes this problem go away.

Using the Emmet abbreviation syntax of:

div>ul>li

will produce the same list as shown above. If you need more list items you can add a multiplication to the abbreviation. So if you want a list with five items the abbreviation becomes:

div>ul>li*5

which produces:

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

I’ve barely scratched the surface of Emmet functionality here so if you would like to find out more head over to the Emmet home page.

Which VS Code plugin do I need?

None. Support for Emmet is baked right into VS Code.

How do I use Emmet with VS Code?

For html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less file types Emmet is available automatically. Once you start typing an Emmet abbreviation, the abbreviation is displayed in the suggestion list.

For more information on Emmet integration with VS Code such as Emmet with multi-cursors, keyboard shortcuts and so on, take a look at the VS Code docs.

Acknowledgments

Pluralsight course by Kristian Freeman

VS Code Emment home page

Emmet Documentation