DEV Community

Leonardo Schmitt
Leonardo Schmitt

Posted on

How to boost your code speed with Emmet in VSCODE

🔥 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

 <!-- header+.container+footer -->
 <header></header>
 <div class="container"></div>
 <footer></footer>
Enter fullscreen mode Exit fullscreen mode

Or this header>h1.title{this is a title}>footer

<!-- header>h1.title{this is a title}>footer -->
 <header>
         <h1 class="title">
            this is a title
            <footer></footer>
         </h1>
</header>
Enter fullscreen mode Exit fullscreen mode

Or this .container>.item-$*5

<!--  .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>
Enter fullscreen mode Exit fullscreen mode

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


<!--  header+ul+li^^main>footer  -->
 <header>
       <ul>
          <li></li>
       </ul>
</header>
<main></main>
<footer></footer>
Enter fullscreen mode Exit fullscreen mode

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

<p>lorem20</p>

<!--  <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>
Enter fullscreen mode Exit fullscreen mode

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

<!--  div+(div>h1>span)+footer -->
  <div></div>
  <div>
     <h1><span></span></h1>
  </div>
  <footer></footer>
Enter fullscreen mode Exit fullscreen mode

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

<!--  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>
Enter fullscreen mode Exit fullscreen mode

+ 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:


.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;
}
Enter fullscreen mode Exit fullscreen mode

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! đź‘‹

Top comments (0)