Who is Emmet?! (Your New Best Friend!)
Tags: emmet, shortcuts, beginners, plugins
Published: 2021-04-19 03:30:50

The first time I heard about Emmet abbreviations, my mind was blown completely wide open. I was amazed by the sheer power and ease of this tool and wondered how I had never heard about it. If you still don't know about Emmet, allow me to introduce you to your new best friend!

----

So who is Emmet? Well, the real question is not "*who* is Emmet?" but "*what* is Emmet?" Emmet is a plugin for text editors that is meant to do a lot of heavy lifting for you. If you're like me and your text editor of choice is [VSCode](https://code.visualstudio.com/), support for Emmet is already built in and you don't have to do a thing to start taking advantage of it. Otherwise, all you have to is install the plugin and you're ready to go.

At its core, Emmet is really just a series of keyboard shortcuts. When I was first introduced to Emmet, I certainly did not realize how much it could do. In fact, I initially thought that the first Emmet abbreviation that I learned was a standalone shortcut. Now, Emmet can be used for a **lot** including CSS, XML, and more, but if you're just getting started and/or have not dealt with Emmet before, allow me to show you some of the abbreviations that I have come to use for HTML on a daily basis.

If you're starting up an HTML project and you need some template code, you can Google it, or you can just type `!` and hit `enter`/`return` , and Emmet will then expand it to:
```
<!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>
```

Perhaps my most commonly-used Emmet abbreviations are the ones for classes and ids. By default, if you use Emmet abbreviation for a class and/or id with no other information, Emmet will assume that you're trying to create a `div`. To create a `div` with a class of "paragraph", you can just type `.paragraph` and, when you hit `enter`/`return`, it will be expanded to:
```
<div class="paragraph"></div>
```
If you wanted to just give that `div` an id of "paragraph", you could type `#paragraph`, and that will expand to:
```
<div id="paragraph"></div>
```

But where Emmet gets *really* magical, is in its ability to chain abbreviations! So, let's say you wanted that `div` to have both a class of "paragraph" and an id of "first-paragraph". All you'd have to do is type `.paragraph#first-paragraph` and Emmet would expand that to:
```
<div class="paragraph" id="first-paragraph"></div>
```
And if you wanted that `div` to be a `p` tag, you'd just have to pop a "p" on to the beginning of your abbreviation like so: `p.paragraph#first-paragraph` to get
```
<p class="paragraph" id="first-paragraph"></p>
```
----
 
**<center>Pretty awesome, right?!</center>**
 ----

And it's not just `p` tags! If you wanted it to be an `h1` or wanted to create a form, you could say `h1.header#heading`, which would give you
```
<h1 class="header" id="heading"></h1>
```
or `form#my-awesome-form`, which would give you
```
<form action="" id="my-awesome-form"></form>
```

You can even create `li`s within `ul`s! To create a `ul` with four `li`s with a class of "thing", you can say `ul>li.thing*4` and Emmet magic will return
```
<ul>
    <li class="thing"></li>
    <li class="thing"></li>
    <li class="thing"></li>
    <li class="thing"></li>
</ul>
```

And if you wanted to number the "things" (or maybe just felt particularly inspired by Dr. Seuss), you could say `ul>li.thing$*4` to add numerical values:
```
<ul>
    <li class="thing1"></li>
    <li class="thing2"></li>
    <li class="thing3"></li>
    <li class="thing4"></li>
</ul>
```
----

All of this to say, Emmet is absolutely spectacular and, quite frankly, fun to use! I **highly** recommend that you install the plugin (if necessary), learn these shortcuts, and take a look at the documentation to find out else Emmet can help you save time and be the most efficient developer you can be!