By Chris on Code
This tutorial is out of date and no longer maintained.
Emmet (who remembers when it was called Zen Coding?) is a very useful code editor tool that brings snippets and supercharged shortcuts for generating HTML/markup and even CSS.
Save tons of time in your daily workflow by learning more of Emmet syntax. Also remember that all of these examples will be in plain HTML files, but you can also configure Emmet to be used with React/JSX, Angular templates, Vue templates, and more.
To give you a quick example of Emmet’s main use, expanding an abbreviation into full HTML.
We’ll be typing the following and pressing tab
to expand it:
section.hero.is-info>.hero-body>.container>h1.title{Hello!}
The following will be expanded to:
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<h1 class="title">Hello!</h1>
</div>
</div>
</section>
Emmet can be found already installed by default on most editors including Sublime Text, VS Code, and WebStorm. For more info on Emmet, check out:
Let’s dig into some of the lesser-known features of Emmet. Oh and before we get into it, here’s some info about my setup:
By using ()
we can group code together. This works well with the sibling +
operator.
Let’s say we wanted two div
s to sit next to each other and each has its own children. Notice we’ll be using Bulma CSS classes.
Related Reading: See why Bulma is My Current Favorite CSS Framework
.columns>(.column>.box>h2{I am a box})+(.column>.box>h3{I am another box})
This will be expanded to:
<div class="columns">
<div class="column">
<div class="box">
<h2>I am a box</h2>
</div>
</div>
<div class="column">
<div class="box">
<h3>I am another box</h3>
</div>
</div>
</div>
One neat trick Emmet can do is climb back up the tree with ^
if you find yourself nested too far down. I’ve found that using grouping more means I don’t have to climb up the tree. It is useful in some scenarios so it’s good to know.
Here’s another way to achieve our previous example with climbing up:
.columns>.column>.box>h2{Box}^^.column>.box>h3{Box}
<div class="columns">
<div class="column">
<div class="box">
<h2>Box</h2>
</div>
</div>
<div class="column">
<div class="box">
<h3>Box</h3>
</div>
</div>
</div>
I much prefer the grouping way.
When I’m building out some sample HTML, it’s often helpful to use numbering to differentiate sections. (Section 1, Section 2, etc).
Emmet can also help us with numbering using $
. I did a Tweet about this the other day and that’s what sparked me to write this post!
p>strong{I am level $ strong!!!!}*10
<p>
<strong>I am level 1 strong!!!!</strong>
<strong>I am level 2 strong!!!!</strong>
<strong>I am level 3 strong!!!!</strong>
<strong>I am level 4 strong!!!!</strong>
<strong>I am level 5 strong!!!!</strong>
<strong>I am level 6 strong!!!!</strong>
<strong>I am level 7 strong!!!!</strong>
<strong>I am level 8 strong!!!!</strong>
<strong>I am level 9 strong!!!!</strong>
<strong>I am level 10 strong!!!!</strong>
</p>
This is something that I really need to use more in my workflow. It gets tedious typing out some of the HTML tags.
I’ll put this in a list since there are so many to name. Definitely check out the Emmet Cheat Sheet in the HTML section to see all of these.
!
: Full HTML pagea
: <a href=""></a>
base
: <base href="" />
link:css
: <link rel="stylesheet" href="style.css" />
script:src
: <script src=""></script>
input:text
: <input type="text" name="" id="" />
input:t
: <input type="text" name="" id="" />
By using []
we can add attributes to our HTML. For example,
`` input[type=email].my-input
will become:
```html
<input type="email" class="my-input">
Here’s a cool one using data-attributes and numbering:
div[data-item=$]*10
<div data-item="1"></div>
<div data-item="2"></div>
<div data-item="3"></div>
<div data-item="4"></div>
<div data-item="5"></div>
<div data-item="6"></div>
<div data-item="7"></div>
<div data-item="8"></div>
<div data-item="9"></div>
<div data-item="10"></div>
This is one that I found out about recently and am super excited to add this to my daily toolset.
Select any code and surround it with the tags you want. This requires a little more legwork and you’ll need to open up your Command Palette (CTRL+SHIFT+P
or COMMAND+SHIFT+P
).
The instructions for Visual Studio Code is as follows:
CTRL+SHIFT+P
(or COMMAND+SHIFT+P
).Emmet: Wrap with Abbreviation
.Could be very useful!
This is also one I found recently that is brilliant. Ever look at an opening HTML tag and wonder where it’s closing tag is? Ever wanted to select everything inside of the opening/closing tags? Tag balancing to the rescue!
CTRL+SHIFT+P
(or COMMAND+SHIFT+P
).Emmet: Balance (Outward)
.In addition to markup files, Emmet can be used in CSS. Very useful to expand some things that require a lot of typing. I’ll show off a few of my often used ones:
pos
: position: relative;
d
: display: block;
m
: margin: ;
mt
: margin-top: ;
mb
: margin-bottom: ;
pw
: padding-top: ;
pb
: padding-bottom: ;
bg
: background: #000;
!
: !important
@m
: @media screen {}
c
: color: #000;
op
: opacity: ;
Hopefully, you’ve gained a few more Emmet skills to add to your toolset. I’m a big believer in putting in the time to learn the tools we have so that we can be more efficient developers.
Let me know if you liked this post and we’ll do more tips and tricks for ways to improve your workflow.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.