Speed up code your HTML using Emmet in VSCode
Tags: html, emmet, vscode, react
Published: 2020-12-31 04:08:11

## Introduction
On Dec 29, 2020, I had a little reunion with my college friends and my former professor in a zoom meeting. My former professor is [Dicky Arinal](https://github.com/arinal), and he is working for Disney+ now. The reunion reminded me of when Pak Dicky(We called him using Pak in Indonesia) showed off one of his magics using Emmet, and it made me amazed. However, at that time we were still using Visual Studio because he taught ASP.NET, and we needed to install Web Essentials for using Zen Coding, which is the former name of Emmet. 

## What is Emmet?
"Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow:"([https://docs.emmet.io/](https://docs.emmet.io/))

![Emmet](https://dev-to-uploads.s3.amazonaws.com/i/65pdko2huto8oto0m1dw.gif)

Type "!" + press the "tab" and boom!

## Installation in VSCode
*Updated at Feb 20, 2021*
Emmet is built-in right into visual studio code. (Thanks to [Dendi Hadian](https://dev.to/dendihandian) for the comment)
 
## Abbreviations Syntax
### Nesting Operators
**Elements**
Just type any HTML element without <> and press tab, it will automatically generate the HTML tag.
> html
> head
```html
<html></html>
<head></head>
```
![elements](https://dev-to-uploads.s3.amazonaws.com/i/ttf0vf4fpik2o2dmacnn.gif)

**Siblings** +
> h1+h2+p+btn
```html
<h1></h1>
<h2></h2>
<p></p>
<button></button>
```

**Child** >
> table>tr>td
```html
<table>
    <tr>
        <td></td>
    </tr>
</table>
```

**Climb-up** ^
> table>tr>td^^ul>li
```html
<table>
    <tr>
        <td></td>
    </tr>
</table>
<ul>
    <li></li>
</ul>
```

**Multiplication** *
> ul>li*3
```html
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

**Grouping** ()
> (table>tr>td)*2
```html
<table>
    <tr>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td></td>
    </tr>
</table>
```
> (table>tr>td)+ul>li
```html
<table>
    <tr>
        <td></td>
    </tr>
</table>
<ul>
    <li></li>
</ul>
```

**Challenge for you :)**
create this html using emmet
```html
<div>
    <h1></h1>
</div>
<div>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
```
![challenge](https://dev-to-uploads.s3.amazonaws.com/i/mwf6s1t9fncrl1gkkunq.gif) 
>div>h1^div>(table>(tr>td*3)*2)+ul>li*4

### Attribute operators
**id** # => element#id
> h1#heading
p#comment
```html
<h1 id="heading"></h1>
<p id="comment"></p>
```

**class** # => element#class
> div.container
btn.btn.btn-primary
```html
<div class="container"></div>
<button class="btn btn-primary"></button>
```

**Custom attributes** [] => [attr="value"]
> input[type="number" name="quantity" min="1" max="5"]
```html
<input type="number" name="quantity" min="1" max="5">
```

**Inner Text** {} => {text}
> p{hello world}
```html
<p>hello world</p>
```

## Enabling emmet for jsx in vscode
* Open your vscode settings or `⌘ + ,`
* Search emmet in search settings
* In `Emmet: Include Languages` section add new item (item: javascript, value: javascriptreact

![Screen Shot 2020-12-30 at 22.41.14](https://dev-to-uploads.s3.amazonaws.com/i/1o2s05nyjx9r3qee29e3.png)