DEV Community

Cover image for Speed up code your HTML using Emmet in VSCode
Raynaldo Sutisna
Raynaldo Sutisna

Posted on • Edited on

Speed up code your HTML using Emmet in VSCode

#html #emmet #vscode #react

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

Top comments (4)

Collapse
 
allwelldotdev profile image
Allwell • • Edited

Excellent article. I just want to add to this. I was searching for the answer to a similar problem and what I found might be useful to someone else. Here it is.

Though PHP as a language is enabled to allow Emmet abbreviations and snippets by default, sometimes something might go wrong (like in mine) and PHP may now be excluded from "emmet.includeLanguages" JSON object key as is shown below in a screenshot of my settings view in VS code.

my VS code settings view screenshot to show PHP excluded from Emmet included languages

In that case, remove 'php' from 'Exclude Languages' option by clicking the 'x' icon to the extreme right on hover.

Now, you should be able to use Emmet in PHP. If Emmet abbreviations are still not working on your IDE, do the next instruction.

Just to ensure nothing goes wrong again, included PHP as a language in 'Include Languages' setting.

'Include Languages' setting view

The first input with 'Key' placeholder will be the language identifier of the programming language where you want Emmet abbreviations to work on.

The second input with 'Value' placeholder will be the language identifier of an Emmet supported mode (e.g. html, css, javascriptreact).

To find the language identifier of your programming language, check VS code official docs.

For example, to use Emmet HTML abbreviations inside JavaScript:

{
  "emmet.includeLanguages": {
    "javascript": "html"
  }
}
Enter fullscreen mode Exit fullscreen mode

This should solve your 'Emmet abbreviation to working on other programming languages' problem on VS code.

If you came across this problem and have now found a solution. You're welcome. 😊

Collapse
 
gema profile image
Gema Anggada • • Edited

I actually use this as my cheat sheet lol.

Collapse
 
dendihandian profile image
Dendi Handian • • Edited

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 •

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

Read next

nnnirajn profile image

10 CSS Tricks for UI developers

Niraj Narkhede -

gladiatorsbattle profile image

Building a Highly Reactive Page in React: A Deep Dive into Gladiator Crash

Gladiators Battle -

steve8708 profile image

Turn a Figma Dropdown Design Into Working React Code in 1 Minute

Steve Sewell -

yeshwanthvarma profile image

My Deloitte Interview Experience: On-Campus Placement Drive 2024 (Product Engineering Analyst Role)

Yeshwanth Valishetti -