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.
No need to write the whole doctype yourself. Each HTML file can be kickstarted by simply typing
doc and hit TAB.
Emmet inserts implicit tag names here (such as
td) and you can simply multiply elements and apply the current iteration number to e.g. the elements id with the
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
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!