What is Emmet? Using Emmet in VS Code

“Colorful lines of code on a computer screen” by Sai Kiran Anagani on Unsplash

Before we get into what is Emmet and how to use it, let me talk why i choose VS code as my Text Editor/ IDE (yeah you can call it an IDE as it has almost all the capabilities of an IDE).

Why VS code? Whats so special ? Why not any other IDE?

When i got into web development i tried a lot of IDEs: Atom, Brackets, Sublime. The thing is i kept switching. I am not saying that these IDEs aren’t good, the fact is i love them however i always wanted something more from my IDE. At one point i thought there is something wrong with me :P Then i met VS code and boy o boy i have never switched to any other IDE again. VS code was special, it had all the tools that i needed out of the box, let that be source control integration, integrated terminal, beautifier, debugging that’s a big plus, changing theme is effortless and so much more. Also it keeps getting better and better. For things which are not available , you can easily get some plug in on the market place.

In this article we will get to know how we can use VS code to increase our productivity.

What is Emmet?

If you go by their site the definition is

“Emmet is a plug in for many popular text editors which greatly improves HTML & CSS workflow:”

And Emmet does fulfill what they promise, you can use short expressions to generate HTML markup, CSS.

Let’s get started:

Tip: While typing the Emmet Abbreviations, you can press Ctrl + Space see what will be generated(Inside a pop up)

The general way to write Emmet abbreviation is:

tagName[series of expressions]

Where tagName: is the HTML tag you want to generate

Series of expressions will govern the markup that will be generated.

1. Generating HTML Skeleton

The first thing you would do when creating a HTML page is create the skeleton for it, that is type DOCTYPE, html,head, body tags.

What it you could do all that with just 2 keys? Yeah Emmet let’s you do that.

Just type ‘!` in the editor, it will show a pop up with the content that will be generated, press enter and there you have your HTML skeleton . Cool isn’t is?

HTML Skeleton generated with ‘!’

2. Elements with text content inside them

If you want to generate a div with text content inside them

div{This is a div}

Will generate a div tag with whatever text that is specified inside the curly braces ({})

Element with Text Content

3. Nested elements

To generate nested we will use ‘>’ operator

ul>li

Nested Elements

Let’s make things a bit interesting,

Generate a list 3 li’s , each li has an anchor(a) tag:

For nesting we can use ‘>’ operator. But how would we go about for repetition ? Repetition can be done using * operator li*3 will give three li’s just like normal multiplication.

ul>li*3>a

ul>li*3>a

If you wanted numbers inside your li’s you could use $ operator

ul>li{$}*3

Item Numbering

You can also use $ multiple times so the number is padded with 0. You can set base number with ‘@N’ and direction with ‘@-’

ul>li{$@-}*5

Reverse Item Numbering

ul>li{$@10}*5

Item Numbering Starting with Specified Base

You can even use them together

ul>li{$@-10}*5

Reverse Item Numbering Starting with Specified Base

4. What about classes and Id

div#main.container.responsive

you can specify Id by using ‘#’ and classes by using ‘.’

Id and Classes

You can specify multiple classes but do remember that you can have only one id. If you specify two id’s using #, the 2nd id will override the first.

So:

div#main#main-body.container.responsive

will be expanded to

div#main#main-body.container.responsive

5. Custom attributes

If you want a div with custom data property you would do the following:

div[data-name=logo]

Custom Attributes

6. Generating Siblings.

Let’s say you want to have a header tag, div tag, footer tag. What would you do?

These are not nested so you cant use ‘>’

To generate sibling use ‘+’ operator

header+div+footer

Siblings

7. Grouping

You can use ‘()’ operator to group complex abbreviations.

div>(a>p>span+span)*3

This will expand to

Groping Elements

8. Lorem Ipsum

Using this you can get lorem Ipsum placeholder text:

lorem

You can also use multiplication operator with this to get more content

lorem*5

CSS

You can also use Emmet for CSS. This can be very helpful as you don’t have to remember long property names, use short expressions to assign values to properties. Let’s look at some examples.

Margin of 10 on all sides

Just type :

m10–10–10–10

This will be expanded to:

margin: 10px 10px 10px 10px;

same thing can be done for padding :

p10–10–10–10

which will be expanded to:

padding: 10px 10px 10px 10px;

And a lot more. To know what other cool things you can do, refer the following links :). Do try them out, they are very helpful.

Emmet 2.0 in Visual Studio Code

Abbreviations Syntax

That’s it for this article. If you liked the article do share it , give it some claps :)