Introduction

Why use emmet ? Simple, it is the most useful tool you can ever find. Its function ? Simplify your life with fast, efficient and very very useful commands.

I've been using emmet for 3 years now and it's really simpler.

1. Installation
2. Syntax
3. Links and doc

Installation

If you're on VScode or JetBrains, it is already installed.

But if it is not, click here

Syntax

Here we are! The fun part. Using emmet is really simple, it uses abbreviation and autocomplete.

For example, if you write this :

div>a*3

It should output this :

<div>
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
</div>

You see? Emmet automatically setup three a inside of a div, by using > and *3.

There's a lot of rules like that but the most used are:

• add children : >
• add sibling : +
• set the number of element : *Number
• set the class : .
• set the id : #
• insert content : {Content}
• use auto-number : $

With this list you should be ready to use emmet but you don't have all the keys.

The exact syntax is : element[#id or .class][{Content}][*Number][>children or +sibling]

This is how it works, but with some exemple you'll clearly understand don't panic.

Let's try some lines
First what should looks like this line ?

div.container>a.item#button{item $}*3

it supposes to output this:

<div class="container">
  <a class="item" id="button">item 1</a>
  <a class="item" id="button">item 2</a>
  <a class="item" id="button">item 3</a>
</div>

Then this one ?

.container>p{Hello world}+a.button{Read more}

If you writted this correctly, you should see this:

<div class="container">
  <p>Hello world</p>
  <a href="" class="button">Read more</a>
</div>

You see? We started with a class and it automatically add a <div>. It is the power of emmet.

With emmet you also have the autocomplete, you just have to write img and it'll be <img src="" alt="">. What a super power huh?

Links and doc

emmet documentation
emmet installation

Thank you very much for reading this article, made with love and coffee. <3