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)