Can VS Code Do Emmet?

As in, does Visual Studio Code, the free code editor from Microsoft, work with Emmet, the free and open source code expansion tool? The answer is of course! In fact, you don't have to do anything at all to get it going. Emmet is built-in to VS Code.

Let's take a look at what Emmet can do and some VS Code specific stuff to make the most of it.


Need Lorem Ipsum? Inside HTML?

Emmet is great for that. With it installed in the code editor you are using, you can type "lorem" and then tab and it will expand into a paragraph of Lorem Ipsum placeholder text. But it can do more! You can control how much you get, place it within HTML structure as it expands, and get different bits of it in repeated elements.



The next generation of Zen Coding. Essentially it gives you shortcuts you can type that expand into full HTML or CSS. Like nav>a*8 will expand into a <nav> tag with eight links inside it with empty hrefs. Or, try div.module*4>p*2>lorem and press tab. There are also a bunch of editor navigation shortcuts like "move to the next edit point."