How to boost your code speed with Emmet in VSCODE
Published: 2021-04-27 00:12:26

:fire: If you code in Visual Studio Code, you may have already encountered something called Emmet. It is a powerful standard tool that you can easily increase the speed of your code, especially CSS and HTML. Here, I show you the essence of it so you can start using right away.

# Snippets - HTML

Emmet can translate `header+.container+footer` to

```html
 <!-- header+.container+footer -->
 <header></header>
 <div class="container"></div>
 <footer></footer>
```
Or this `header>h1.title{this is a title}>footer`

```html
<!-- header>h1.title{this is a title}>footer -->
 <header>
         <h1 class="title">
            this is a title
            <footer></footer>
         </h1>
</header>
```

Or this `.container>.item-$*5`

```html
<!--  .container>.item-$*5  -->
<div class="container">
         <div class="item-1"></div>
         <div class="item-2"></div>
         <div class="item-3"></div>
         <div class="item-4"></div>
         <div class="item-5"></div>
</div>

```

Or this `header+ul+li^^main>footer`

```html

<!--  header+ul+li^^main>footer  -->
 <header>
       <ul>
          <li></li>
       </ul>
</header>
<main></main>
<footer></footer>

```

If you create a `p` element and write lorem plus a certain number, it will result in lorem paragraphs, rapidly.

`<p>lorem20</p>`

```html
<!--  <p>lorem20</p>  -->
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos ipsum quibusdam nisi similique ex in quidem harum aut ea labore!</p>

```

Also, brackets are used to group elements as follows ` div+(div>h1>span)+footer`

```html
<!--  div+(div>h1>span)+footer -->
  <div></div>
  <div>
     <h1><span></span></h1>
  </div>
  <footer></footer>

```

You can create forms by using a snippet like this `form:get>input:number.age+input:s[value='submit']`

```html
<!--  form:get>input:number.age+input:s[value='submit'] -->
   <form action="" method="get">
         <input type="number" name="" id="" class="age" />
         <input type="submit" value="submit" />
   </form>

```

`+` means adding an element after another one, e.g `header+main+footer`
`>` means adding an element inside another one, e.g `header>ul>li`
`^` means adding an element outside, lifting it up, e.g `header>ul>li^^main`
`*` means multiplying element, eg `div.container*3`
`$` means numbering elements, eg `div.container$*3`
`.` adds a class to the element, eg `div.container`
`#` adds an ID to the element, eg `div#container`
`[attr]` adds an attribute to the element, eg `   h1[contenteditable=true class='heading']{edit me}`
`{}` adds a text to the element, eg `h2{subtitle}`


# Snippets CSS 

It's easy to apply using CSS, as most cases you have to write the first letter of the property followed by the value:

```css

.box {
   /* w:a */
   width:auto;
   /* w100px */
   height:100px; 
   /* df */
   display:flex;
   /* aic*/
   align-items:center;
   /*jcc*/
   justify-content:center;
   /* p50 */
   padding:50px;
   /* c#f */
   color:#fff;
   /* bg */
   background: #000;
   /* ffa */
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   /* t100 */
  top:100px;
  /*bxz*/
  box-sizing: border-box;
  /*ovh*/
  overflow:hidden;
}


```

That's the base of Emmet, you can find the comprehensive cheatcheet here: https://docs.emmet.io/cheat-sheet/ and the site here: https://emmet.io/


I hope you find it interesting... bye bye! :wave: