Some Emmet Magic Frontend Devs should know

I would like to share some examples of useful Emmet commands that heavily speed up my markup creation - and maybe yours too.

If you haven't heard of Emmet before, see this awesome introduction to Emmet by Thabi. Emmet is integrated in most code editors by default, so maybe you're using it right now without knowing it's Emmet under the hood 😅. In VS Code e.g. you just have to type the Emmet abbreviation and hit TAB to create the markup.

Document creation

doc

No need to write the whole doctype yourself. Each HTML file can be kickstarted by simply typing doc and hit TAB.

Table creation

table>#row$*3>[colspan=2]

Emmet inserts implicit tag names here (such as tr and td) and you can simply multiply elements and apply the current iteration number to e.g. the elements id with the $ sign.

Form creation

form:post>(select>opt[value=$]{#$$}*4)+btn:s

There are also a lot of aliases, that massively reduces the number of characters you have to type, e.g. btn:s instead of button[type=submit]. Also you can force leading Zeros with multiple $ signs.

Generic content

ul.generic>lorem6.item*5

In case you just create HTML layout demos, the lorem abbreviation comes in very handy, followed by the number of words the sentence should consist of.

Bonus: Abbreviation Wrap in VS Code

If you're changing existing markup rather than creating it from scratch (which is probably almost always the case), you can make use of VS Code's command Emmet: Wrap with Abbreviation. Here you can select some content and wrap it with the desired tags by using Emmet Syntax:

Plus: Setting a keyboard shortcut for this feature saves a lot of time! On my Windows machine, I configured CTRL+ALT+E

Wrap it up

We've seen, that there are a lot of abbreviations that speed up the process of creating markup. This is especially useful, when you're creating a lot of markup by hand.

Check the Emmet Cheat Sheet if you want to learn more. Happy coding!

Published: 20th July 2020