Daily Dev Tips №90 — Visual Studio Code —WTF is Emmet?!

QJ Li
QJ Li
Sep 1, 2018 · 1 min read

For those who do not know about this Emmet , here is an official definition:

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow

Visual Studio Code has built-in support for Emmet 2.0 and it is basically a very cool way to generate html / css code much quicker.

TL;DR

Open up an html page via VS Code and type:

html>head+body// go to the body then typediv>ul>li*3>p.center>{hello everyone$}

Here is the html markup the above two lines generated:

visual studio code — emmet html

Here is the demo video:

visual studio code — emmet demo

Thanks for reading! 🎊 If you find this helpful don’t forget to give some claps 👏🏻 and feel free to share this with your friends and followers! 🙏If you have some tips to share, feel free to comment below.

QJ Li

Written by

QJ Li

Coding | Lead Myself | Family | Books | Personal CI / CD Daily

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade