Cypher Akshay
How to write fast code with Emmet

How to write fast code with Emmet

Use emmet in VScode for writing the fast code

Akshay Mishra's photo
Akshay Mishra
·

5 min read

Table of contents

What is Emmet?

It is a plugin that allows repetitive writing code in VS code editor with short expressions and improves the workflow of editing HTML Markup, CSS, and Other programming languages.

Let's understand emmet expression :

let's think to write a boilerplate in HTML Markup like this manually.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

you will need to remember all the lines of markup and it will take a lot of time to write this repetitive code in every new project. And maybe you will do a lot of typos while writing this markup.

This is where Emmet comes in the game.

You can write this boilerplate with just two words only, can you believe it?

  ! + Tab   (exclamation mark + Tab button)

Note: We always hit Tab to execute the emmet expression

That's how emmet expressions are very helpful to write code faster.

Let's Take more Examples:

1. Text content inside the tag

To write a div with content inside it
Emmet expression:

  div{this is a content}

In emmet, we always use {} curly braces to put content inside the tag.

Outcome:

<div>this is a content</div>

2. Child Relation: nesting elements inside other elements

to nest any element inside other elements we use >

Emmet expression:

div>ul>li

Here li is a child of ul and ul is a child of div. and the div is the parent of all these elements.

Outcome:

<div>
    <ul>
        <li></li>
    </ul>
</div>

3. Generating the same repetitive code of any element

Suppose we have to generate 4 item list li inside the unordered list ul which is contained inside the parent div If you write it with a manual approach you have to write the li tag four times.

Emmet expression:

div>ul>li*4

Repetition can be done by Asterisk*, we use *4 to generate the same li tag four times.

Outcome:

<div>
    <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
    </ul>
</div>

4. Generating Class & Id inside any elements

Firstly, let you know how we represent Class & Id in Emmet expression, then we will know how to generate it inside any elements

Class = . (a dot) "classes are group names with the same functionality"

Id = # (pound) "id are names targeting with specific functionality"

let's create a nav tag with the class name of navbar-flex

Emmet expression:

nav.navbar-flex

Outcome:

<nav class="navbar-flex"></nav>

now create a nav tag with the id name of navbar-flex

Emmet expression:

nav#navbar-flex

Outcome:

<nav id="navbar-flex"></nav>

NOTE: In emmet the div tag is the default tag so, when you directly give any class and id names will automatically generate with the div tag only.

Emmet expression:

.flex-container

Outcome:

<div class="flex-container"></div>

Now, If you want to give both class and id in the same elements at the same time

Suppose you want to give a class - nav-container and id - nav-flex to a div tag

Emmet expression:

div.nav-container#nav-flex

Outcome:

<div class="nav-container" id="nav-flex"></div>

5. Give numbering in class or id of any element

In the unordered list ul there are 5 lists li. We have to give the numbering of the classes of the lists

Emmet expression:

ul>li.item$*5

In the above expression, we use $ * 5 to give the numbering to the class = item

so, $ is used to give numbering to any elements or tags

Outcome:

<ul>
     <li class="item1"></li>
     <li class="item2"></li>
     <li class="item3"></li>
     <li class="item4"></li>
     <li class="item5"></li>
</ul>

6. Sibling Relation: Generating elements one after another separately

Suppose, you want onediv, onepara and oneheading tags at the same time one after another then you have to write three times three different line of tags manually.

Now, check how we can write it with the help of emmet in only 3 words

Emmet expression:

div+p+h1

In this expression, we use + to separate them as siblings. It means + is used to generate sibling tags and > is used to generate child tags

Outcome:

<div></div>
<p></p>
<h3></h3>

7. Grouping Relation: generating both child & sibling tags with a single line

We can write too many tags or elements in one line of expression with the care of sibling and child relation of the tags.

Emmet expression:

div>(header>ul>li*3>a)+footer>p

In this expression, Inside the div tag header,unordered list with 3 link list created as a child and footer as a sibling of header with div tag as a parent.

Outcome:

<div>
       <header>
           <ul>
               <li><a href=""></a></li>
               <li><a href=""></a></li>
               <li><a href=""></a></li>
           </ul>
       </header>
       <footer>
           <p></p>
       </footer>
</div>

Emmet for CSS:

You can also use emmet in writing CSS properties in shorthand. you don't have to remember all the properties and type them manually.

let's take an example:

Think you have to give a margin of 25px to all the sides

Emmet expression:

m25-25-25-25

Outcome:

margin: 25px 25px 25px 25px;

Just like that assume you have to give a padding of 25px to all sides

Emmet expression:

p25-25-25-25

Outcome:

padding: 25px 25px 25px 25px;

Conclusion:

In the above article, I tried to explain some of the basic expressions of the emmet which are commonly required. There are lots of more expressions in emmet, But it will be boring & messy reading a long article for you. I hope you like this article and learned how you can write code faster with help of Emmet. If you like this, please subscribe to me, and if you found this helpful please share it with your peers and any younger who just start with code.

P.S. : I will recommend any beginner to use VScode IDE which is Microsoft product and integrated with Emmet

This is not sponsored by VScode it's my personal recommendation.

I am attaching some important reference links for practice and explore more in it:

Reference 1: official emmet docs

Reference 2: quick reference docs

Badge

Download Cheatsheet

Did you find this article valuable?

Support Cypher Akshay by becoming a sponsor. Any amount is appreciated!

iwritecodeWeb DevelopmentEmmetHTML5