Speed up code your HTML using Emmet in VSCode

#html #emmet #vscode #react

Raynaldo Sutisna Dec 31, 2020 ・Updated on Feb 20 ・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/)

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>

Siblings +

h1+h2+p+btn

<h1></h1>
<h2></h2>
<p></p>
<button></button>

Child >

table>tr>td

<table>
    <tr>
        <td></td>
    </tr>
</table>

Climb-up ^

table>tr>td^^ul>li

<table>
    <tr>
        <td></td>
    </tr>
</table>
<ul>
    <li></li>
</ul>

Multiplication *

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Grouping ()

(table>tr>td)*2

<table>
    <tr>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td></td>
    </tr>
</table>

(table>tr>td)+ul>li

<table>
    <tr>
        <td></td>
    </tr>
</table>
<ul>
    <li></li>
</ul>

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>

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>

class # => element#class

div.container
btn.btn.btn-primary

<div class="container"></div>
<button class="btn btn-primary"></button>

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

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

<input type="number" name="quantity" min="1" max="5">

Inner Text {} => {text}

p{hello world}

<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