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:
- Font: Dank Mono
- Editor: VS Code
- Theme: Monokai Pro
Grouping and Sibling
By using () we can group code together. This works well with the sibling + operator.
Let’s say we wanted two divs 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>Climbing Up
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.
Numbering
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>HTML Tags Expansions
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’s 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="" />
Attributes
By using [] we can add attributes to our HTML. For example,
input[type=email].my-inputwill become:
<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>Wrap with Abbreviation
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 (cmd + shift + p).
The instructions for VS Code is as follows:
- You’ll need to place your cursor on the tag you want to wrap.
- Open your command palette with
ctrl/cmd + shift + p - Find
Emmet: Wrap with Abbreviation - Type in your Emmet abbreviation that will wrap your current tag
Could be very useful!
Tag Balancing
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!
- Place your cursor inside the tags you want to find
- Open the command palette with
ctrl/cmd + shift + p - Select
Emmet: Balance (Outward) - Do this multiple times to keep expanding outwards
CSS
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: ;
Conclusion
Hopefully you’ve gained a few more Emmet skills to add to your toolset. I’m a big believer of 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.
Source: Scotch.io