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