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 id=”foo” class=”bar” title=”toto”>cool right?</div>
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. 🤟🏼