Hi dear friends,
Do you know about Emmet? Have you ever used it for your code? If not, you may regret not knowing this super powerful tool.
Emmet is a plugin for many popular text editors, which greatly improves HTML & CSS workflow. And most important things, guys and girls, is the:
Speed, Oh yeah, Emmet make you a 10 times faster developer than you normaly are.
Some years ago VSCode team decided to integrate this plugin into their text editor thanks to its big success among developers.
How does Emmet boost your speed?
The keyword is “abbreviation”. With Emmet, you can write a block of code in less than a second. All that you need the right abbreviation. Once you get used to Emmet’s abbreviations, you’ll notice how your productivity had improved. It’s a smart way to coding since you put in a small effort, but what you gain is more important.
See Emmet in action?
- Other examples:
What about React? Templates have a different extension than the classical HTML extension!
With Angular, we don’t have this issue since templates always have an
.html extension, so that Emmet abbreviation will work perfectly by default. Whereas React templates have a different extension either
VSCode had the solution. All we need to do is to configure Emmet telling him that you’re using another language. So, please add it to your Languages list.
settings.json file (
P) and add the following lines:
Here is the code in copy-paste mode ^^
What about Vue?
For Vue.js lovers, here is the configuration line:
This tool is potent. I always had to install it by myself whenever I installed VSCode years ago. Thankfully, no need to install anymore with today’s VSCode.
There are a lot of things you can do with Emmet. I didn’t mention everything to make this article light. You can check all the possibilities you have with Emmet in the article below: