DEV Community

loading...
Cover image for Speed up code your HTML using Emmet in VSCode

Speed up code your HTML using Emmet in VSCode

raaynaldo profile image Raynaldo Sutisna Updated on ・2 min read

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, 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/)

Emmet

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

elements

Siblings +

h1+h2+p+btn

<h1></h1>
<h2></h2>
<p></p>
<button></button>
Enter fullscreen mode Exit fullscreen mode

Child >

table>tr>td

<table>
    <tr>
        <td></td>
    </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

Climb-up ^

table>tr>td^^ul>li

<table>
    <tr>
        <td></td>
    </tr>
</table>
<ul>
    <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Multiplication *

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Grouping ()

(table>tr>td)*2

<table>
    <tr>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td></td>
    </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

(table>tr>td)+ul>li

<table>
    <tr>
        <td></td>
    </tr>
</table>
<ul>
    <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Challenge for you :)
create this html using emmet

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

challenge

div>h1^div>(table>(tr>td*3)*2)+ul>li*4

Attribute operators

id # => element#id

h1#heading
p#comment

<h1 id="heading"></h1>
<p id="comment"></p>
Enter fullscreen mode Exit fullscreen mode

class # => element#class

div.container
btn.btn.btn-primary

<div class="container"></div>
<button class="btn btn-primary"></button>
Enter fullscreen mode Exit fullscreen mode

Custom attributes [] => [attr="value"]

input[type="number" name="quantity" min="1" max="5"]

<input type="number" name="quantity" min="1" max="5">
Enter fullscreen mode Exit fullscreen mode

Inner Text {} => {text}

p{hello world}

<p>hello world</p>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (2)

pic
Editor guide
Collapse
dendihandian profile image
Dendi Handian

code.visualstudio.com/docs/editor/...

Emmet is already built-in VS Code. I think this extension is for creating hyperscript and I haven't tried that.

Collapse
raaynaldo profile image
Raynaldo Sutisna Author

Oh my bad. Thank you for the information. I will update my post :)