As a front-end developer, emmet is such an important tool in my toolbelt. In short emmet provides shortcuts that you can type and expand into full HTML or CSS.

HTML example:

ul.list>li.list__item*3>a[tab]
<ul class="list">
<li class="list__item"><a href="http://" target="_blank" rel="noopener noreferrer"></a></li>
<li class="list__item"><a href="http://" target="_blank" rel="noopener noreferrer"></a></li>
<li class="list__item"><a href="http://" target="_blank" rel="noopener noreferrer"></a></li>
</ul>

CSS example:

.list {
pt0[tab]
}
.list {
padding-top: 0;
}

It can take a bit to get used to the syntax and usage but it will dramatically improve your proficiency as well as reduce HTML errors.

Learn more about Emmet in Visual Studio Code.

Jul 16, 2019