Menu Home

Using Emmet with VS Code

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 htmlhamlpugslimjsxxmlxslcssscsssassless 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 FreemanVS Code Emment home pageEmmet Documentation

Categories: VS Code Web Development

oraclefrontovik

Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.