Why I love pressing tab, featuring Emmet

Matthieu Vignolle
Mar 3 · 2 min read

Recently, I had to re-setup my work computer. So I had to reinstall a lot of software, including my IDE. When it comes to IDEs, I mostly use RubyMine, but I also like to use VSCode from time to time.

One thing I realized is that both RubyMine and VSCode have some default plugins that you might not notice if you don’t know about them. In fact, you might already be using them! One thing for sure is that they are life-changing.

One of the default plugins is Emmet and believe me, you will never write HTML and CSS the same way.

If you haven’t heard of Emmet before, it’s a tool that allows powerful autocompletion. 3 characters can be transformed into 20 by just pressing the tab key. If you know the shortcuts well, you can integrate that beautiful mockup your designer created at least twice as fast.

It’s included by default for good reason!

If you don’t believe me yet, take a look at the gif I made below:

🤯🤯🤯

The cool thing about Emmet is that the shortcuts are very intuitive so that’s easy to remember and use it.

For example, here is a list of feature I use the most :

div.#foo.bar[title=”toto”]{cool right?}

expands to

<div id=”foo” class=”bar” title=”toto”>cool right?</div>

(article>h1+p+footer)*2

expands to

<article>
<h1></h1>
<p></p>
<footer></footer>
</article>
<article>
<h1></h1>
<p></p>
<footer></footer>
</article>

Here are some other shortcuts I like for CSS:

m10 → margin:10px;p10 → padding:10px;d:f → display:flex;ai:c → align-items:center;jc:c → justify-content:center;w:a → width:auto;h:a → height:auto;

This is obviously a non exhaustive list. You can find a nice cheat sheet to help you remember all Emmet’s amazing feature here: https://docs.emmet.io/cheat-sheet/

Emmet works with a lot of text editors, if it’s not included by default, you can download it here: https://emmet.io/download/

I hope it will help you with front-end development. 🤟🏼

Me pressing the tab key over and over 👆🏼

If you liked what you read, you can subscribe to our tech newsletter to read more hot tips or you can join us to revolutionize health care in Europe https://about.doctolib.com/

Pour un système de santé plus humain, efficace et connecté

Matthieu Vignolle

Written by

Software engineer at Doctolib.fr

Doctolib

Pour un système de santé plus humain, efficace et connecté

More from Doctolib

More on Development from Doctolib

Also tagged Frontend

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade