Hi Everyone,

This is my first blog. So, please do not expect much from this, but everything needs a start, so let's get started:

What is Emmet?

💡

Emmet is plugin, which helps us to reduce the overhead for writing boiler plate code, and helps developer to focus more on logic rather than formatting and to avoid syntactical mistakes.

Where to find this?

💡

The magic is VS code already have it configured, we don't need to do any extra stuff, for others we can check it out from its official website: https://emmet.io/download/

How to use it?

💡

Suppose if we want to write simple html page, but we don't need to write the boiler plate code manually. Then Just Press ! and hit Tab and see magic. We can perform other operation too using emmet, hit tab after each shown below:

p.className
p#ID1
p[title="Hello"]
p{My Name is Siddhant.}

Some more magics by emmets?

Parent child relationship \>

Type div.class1>p.class2>p#id1>li\5* then the output will be:

  <div class="class1">
          <p class="class2">
              <p id="id1">
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
              </p>
          </p>
      </div>

Sibling Relationship +

Type div+div+p

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

We can group sibling and parent child relationship
Type "div>(nav>ul>li\5>a)+footer>p"*

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

Thank you guys for having the patience and reading till last, everything can't be covered but I promise most of it. To maintain the dignity of boredom, I finishing here, Have a great day.

Emmet Plugin

Subscribe to my newsletter

Siddhant Srivastava

Siddhant Srivastava