When someone says “Emmet” to you what come to mind? Your answer might depend heavily on your age. I think of this guy…

If you are a little younger or have kids you might be picturing this guy…

Although both these guys could help you out I’ve recently discovered an even more helpful Emmet.

What is it?

Emmet is a toolkit which helps you improve your development workflow. Think of it like snippets but on steroids. It’s available as a plugin to most of the popular text editors out there. It’s even built into Visual Studio Code by default.

Examples

The easiest way to show you what it can do is with some examples. Let’s say you wanted to create an unordered list with 5 items in it. All you’d need to do is type:

ul>li*5

Hit enter and Emmet will magically turn this into:

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

In Emmet the > and + have special meaning:

• > means child
• + means sibling

So to create a div with a paragraph, a span and another paragraph inside.

div>p+span+p

<div>
    <p></p>
    <span></span>
    <p></p>
</div>

There’s some familiarity too with classes and ids. You can use css style syntax on the elements.

div.container>p+span#total

<div class="container">
    <p></p>
    <span id="total"></span>
</div>

You can even have counters, especially useful when you need unique ids. Just add the $ sign where you want it in the id name.

ul>li#item$*3

<ul>
    <li id="item1"></li>
    <li id="item2"></li>
    <li id="item3"></li>
</ul>

As per usual I’m not here to tell you about every single possibility. That’s what the documentation is for. Hopefully you’ve seen enough to give it a go.

A Confession

Until this week, I’d never heard of it. I’ve been doing web development for 18 years and somehow it had passed me by. All those years of hand crafting tables, unordered lists and typing classes out in full! Think of the time I’ve wasted… or have I? It’s easy to fall into the trap of thinking you have to know everything. The more experienced you get the more you realise how little you know. The modern web development stack is mind bogglingly complex. It’s an impossible task to know it all so don’t beat yourself up trying. Learn when you can, share your experiences with others and try to enjoy the process.