loading...
Cover image for Some Emmet Magic Frontend Devs should know

Some Emmet Magic Frontend Devs should know

devmount profile image Andreas ・2 min read

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

Screencast Emmet command doctype

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]

Screencast Emmet command table

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

Screencast Emmet command form

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

Screencast Emmet command generic content

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:

Screencast Abbreviation Wrap in VS Code

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

Screenshot of VS Code Shortcuts Setting for Emmets Abbreviation Wrap

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

Posted on by:

devmount profile

Andreas

@devmount

creator. developer. consultant. freelancer. javascript. php. python. css. husband. dad². guitarero. climber. retro gamer.

Discussion

pic
Editor guide
 

Good stuff! If you are using Webstorm, you can also use a ! to generate a entire HTML boilerplate :)