HTML has always been one of the most cumbersome code to write. Open brackets, attributes, closing (or not closing) brackets – just tedious. Up until I was taking a small online course – and I see in the video, the developer was using these “shortcuts” to write HTML. This guy wasn’t doing opening nor closing tags. He wasn’t worried about attributes or classes. He was simply writing fast.
I had to get this plugin.
After some research – I discovered that he was using Emmet. What exactly is it? Well just like I’ve described, it’s a faster way of writing HTML and CSS. Significantly faster. It claims to be the “the essential tool for web developers“.
As you can see, the number of characters I have to type is decreased by more than half.
And that’s not all. Emmet supports things like multiplication:
You see how powerful that is!
Enabling Emmet in Visual Studio Code:
For VSCode, all you need is to activate this feature. Go to “File” > “Preferences” > “User Settings“. Under “Emmet“, you should see the following options:
// When enabled, emmet abbreviations are expanded when pressing TAB.
// Preferences used to modify behavior of some actions and resolvers of Emmet.
// Define profile for specified syntax or use your own profile with specific rules.
// An array of languages where emmet abbreviations should not be expanded.
Using Emmet in React:
So first, add the syntaxProfiles like so:
This is just the tip of what you can do with Emmet. Like I said, as soon as I used it – I became excited and wanted to share with the world!
Don’t forget to checkout the Emmet Cheat Sheet for a long list of what you can do with this tool. Happy Coding!