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
Discussion (2)
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.
Oh my bad. Thank you for the information. I will update my post :)