Skip to main content

Emmet

1 mins 📖 

Emmet provides a really useful way to make developing easier. It improves the developer experience™. I only discovered it recently but love it already. It originated as Zen Coding about ten years ago. There are a few uses (see official docs), but I'll focus on the amazing abbreviation and snippet expansion feature.

In your HTML, say you need 100 divs. And each should have a class of teddybear. Typing these out by hand might be boring. With Emmet, you can write div*100.teddybear (then press 'tab'). Or if you need each class to be item1, item2, etc. then you can write div.item$*3. There are also HTML elements that get handily created with relevent attributes - try typing a or img. See one of the original articles on Emmet here for more examples. You can download it or check if it comes built-in with your text editor of choice - I use VSCode and found Emmet was ready for use!

Emmet also features CSS selector expansion which allows you to type abbreviated selectors that are expanded when you press 'tab'. It can also automatically add vendor prefixes for you. Try and see how many abbreviations you can guess here ;)