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 Languagessection add new item (item: javascript, value: javascriptreact
Top comments (4)
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.
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.
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:
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. 😊
I actually use this as my cheat sheet lol.
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 :)