Emmet’s power to make you 10 times faster developer

Use the built-in Emmet actions of VSCode

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.

What’s Emmet?

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:
By FAM

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 .jsx or .js.

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.

Open your settings.json file ( CTRL+ SHIFT+ P) and add the following lines:

Here is the code in copy-paste mode ^^

{
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}

What about Vue?

For Vue.js lovers, here is the configuration line:

{
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html":"html"

}
}

Finally

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:

Dear reader, I hope this was clear and useful.

I hope you’re safe wherever you are and your family too! Hang in there. Tomorrow will be better!

Let’s get in touch on Medium, Linkedin, Facebook, Instagram, or Twitter.

🔗www.fam-front.com

FAM

I’m a passionate software engineer and woman in the tech world. Find more about me here: 🔗www.fam-front.com. I love to help people and share what I know!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store