Out of box “Emmet” code snippets in Visual Studio Code

Visual Studio Code has a port for Emmet out-of-the-box too, which gives us more HTML features. Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow or programming.

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime. Same like full version of visual studio, Emmit is way to implement code snippets in the VS Code editor.

For example  let's say we wanted to just type div and then inside of that div we wanted to have a UL. And then we want that UL to have, let's say, five LIs. We could do LI right there and how do you do five of those, we can do *5. Now if I hit Tab, it's going to automatically generate all that HTML.

Notice it's kind of got a cursor there in the first spot, so let's see what that happens there. I can type I first, hit Tab, and go to second, and then just keep typing like this. Now you can use that and hit Escape to get out and to also create things like table or anything else that's more complex.

if you want to learn more about the Emmet syntax you can check out this link here at docs.emmet.io.