Last night I was watching a YouTube video on some new web framework, trying to decide whether it was worth it to learn yet another new tool. The framework was meh, but as the presenter was giving his demos, he was using someting called Emmet in Visual Studio Code to quickly create his HTML markup. I was intrigued, but I don’t use VSCode that often as I’ve been a big fan of Sublime Text since long before VSCode was a thing. Fortunately, a quick check of Package Control showed that Emmet is available for Sublime, too!
So what is Emmet? It’s an editor plugin that makes writing HTML faster by using a CSS-selector-like syntax to form the tags.
For example, typing this:
h1.main-heading#site-title
would result in the following HTML tag in your document after you press tab:
<h1 style="main-heading" id="site-title"></h1>
Emmet will also automatically position the cursor inside the tag once it creates it, making it easy to add your content.
Note that Sublime text will need to know that the file you’re editing contains HTML in order to activate Emmet. You can do this by either saving the file with an .html extension, or selecting “HTML” from the document type menu in the bottom right corner of the window.
As you can see, the input structure consists of a tag name, followed by a dot to add a CSS class, and/or a hash to add an ID. You can add multiple class names, too, which is useful if using CSS frameworks like Bootstrap or Tailwind:
div.container.mx-2.my-3.p-3
Which results in:
<div class="container mx-2 my-3 p-3></div>
Emmett can also create children with the > operator. To create an unordered list, enter:
ul>li#item$*5
In this example, the $ tells Emmett to add a counter to the attribute and the *5 tells it to repeat the tag five times:
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
If you don’t specify a tag name, Emmett defaults to div, so entering:
.card
results in:
<div class="card"></div>
but it’s also smart enough to use a span if you create an element without a tag name inside an inline element:
<a href="https://example.com">.highlight</a>
This gives you:
<a href="https://example.com"><span class="highlight"></span></a>
Similarly, if you create the element inside a list:
<ul>.menuitem>a</ul>
you’ll get a li:
<ul><li class="menuitem"><a href=""></a></li></ul>
Perhaps my favorite Emmet shortcut, though, is !. It creates the full HTML5 boilerplate for a new page. No longer do I have to go hunting Google for a template whenever I start a new project (since I can never remember the proper format for the “viewport” meta tag). Now I just have to type a bang, press tab, and I get this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Emmet also works with CSS files, though I haven’t really looked into those options yet. Sublime, of course, already has pretty good CSS autocompletion, but Emmet gives you additional shortcuts, like m and p for setting margins and padding, respectively. For example, expanding mauto10 in a CSS (or Less, or Sass) file will result in margin: auto 10px;. Personally, however, I find Emmet much more useful for quickly composing HTML.
Emmet is available for many editors, not just Sublime and VSCode. Among the others are Coda, Brackets, Atom, Eclipse, NetBeans, and even Dreamweaver. There’s also a JavaScript version so that Emmet completions can be added to textareas in web apps, as well as plugins for online IDEs and coding playground sites like CodePen and JSFiddle.
Installing Emmet in Sublime Text is easy if you’re using Package Control. Just press Ctrl-Shift-P or Cmd-Shift-P, depending on your platform, to open the Command Palette. Then start typing “Package” to find the “Package Control: Install Package” option. Then enter “Emmet.” There’s a few related packages available, but you’ll want the one that’s just called “Emmet.” If you don’t have Package Control installed, you can add it by following these instructions.
Happy coding!