Faster Workflow: Mastering Emmet, Part 4

Emmet Actions

If you have followed the first three parts of this series, you now know how to create large code blocks with Emmet. However, sometimes you need to edit your existing HTML and CSS.

Emmet can do that for you as well. You can easily wrap existing text in Emmet. You can wrap individual lines or code blocks easily.

Let’s see some functions that help with this.

Go to Matching Pair

Ctrl+Alt+J

In HTML, this allows you to quickly traverse between the opening and closing tags. “Go to Matching Pair” action uses “HTML Matcher” internally, so it may also work in non-HTML syntax.

Example: With this action you can quickly jump to the end tag of any element.

Wrap with Abbreviation

Shift+Ctrl+G

This is a very powerful tool in Emmet. It takes an abbreviation, expands it and places the currently selected content in the last element of the generated snippet. You can easily wrap the text with HTML tags.

In the above image you can see:

• All content has been wrapped with an article tag.
• Both lines have been wrapped with a p tag.
• I have also added new h1 tag.

How to Do It

Select the content and press Shift+Ctrl+G, then enter your abbreviation and press enter. For the above lines, I have used article>h1{title here}+p* abbreviation.

I have used > too add an h1 as child element and a + symbol to wrap both lines with p as a sibling element. The * symbol is used to wrap each line.

Wrapping Individual Lines

Ctrl+Shift+G or Ctrl+Alt+Enter 

This is one of best features of Emmet. You can wrap multiple paragraphs, lists etc with this feature very easily. To repeat an element you can use the * operator, as I have used in the above example. Let’s say you want to create a navigation menu. How do you do it?

Example Navigation Menu Let’s say you have four items, you want to wrap them in a ul and each li list item should be an a link.

Home
About
Portfolio
Contact

Select all items and press Ctrl+Shift+G or Ctrl+Alt+Enter and enter your abbreviation in the abbreviation panel. I have used a nav>ul>li*>a abbreviation to wrap menu items.

Here you can see final result our nav>ul>li*>a abbreviation has generated following HTML.

<nav>
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">About</a></li>
		<li><a href="">Portfolio</a></li>
		<li><a href="">Contact</a></li>
	</ul>
</nav>

A More Complex Example

Emmet allows us to control and provide default values or elements. Let’s see another, more complex, example. I am going to wrap the above menu with a more complex abbreviation. Here are our menu items.

Home
About
Portfolio
Contact

Now select these items and press Shift+Ctrl+G and enter the following abbreviation.

nav>ul>li[title=$#]*>a[href=$#.html]{$#}>img[src=$#.png alt="$#"].nav-bg

This will generate following code for menu items.

<nav>
	<ul>
		<li title="Home">
			<a href="Home.html">Home
			<img src="Home.png" alt="Home" class="nav-bg">
			</a>
		</li>
		<li title="About">
			<a href="About.html">About
			<img src="About.png" alt="About" class="nav-bg">
			</a>
		</li>
		<li title="Portfolio">
			<a href="Portfolio.html">Portfolio
			<img src="Portfolio.png" alt="Portfolio" class="nav-bg">
			</a>
		</li>
		<li title="Contact">
			<a href="Contact.html">Contact
			<img src="Contact.png" alt="Contact" class="nav-bg">
			</a>
		</li>
	</ul>
</nav>

In the above example, you can see it is very easy to generate complex HTML code with Emmet. It does take some time to master the Emmet syntax but after learning the abbreviations you will be able to generate complex HTML code.

Go to Edit Point

This action works for HTML code blocks and allows you to quickly jump between important code points. You can easily type values for empty attributes.

You can use Tab to go to the next edit point and Shift+Tab to go to previous edit point in SublimeText.

Toggle Comment

— ⇧⌥/ / Shift+Ctrl+/

Comments in HTML and CSS are very helpful for the web developer. Every text editor has some shortcuts to add comments. It is very good practice to comment out your code, especially in complex web pages, to indicate sections of a document. Comments can help you and others to understand your code.

You can easily comment out your HTML and CSS code with Emmet. Normally when there is no selection, text editors such as SublimeText toggle comments on the current line while Emmet’s toogle comment feature does this on the current context. For HTML it is a full tag, for CSS it is a rule or full property.

When you press Shift+Ctrl+/ for the first time, your code will be commented out, press again to remove the comments.

Split, Join and Remove Tags

Sometimes you need to remove tags from your code. You can easily do it with Emmet.

Split/join

Shift+Ctrl+` : This feature can convert <header></header> into <header/> and vice versa. (<header/> into <header></header> ).

Remove Tag

The Shift+Ctrl+; shortcut will remove tags from element. For example, if you want to remove <h2></h2> from the following text <h2>hello there</h2>, you need to place your cursor inside the <h2></h2> tag, and then press the keyboard shortcut Shift+Ctrl+;.

And that’s all. I hope this Emmet series has helped you, and will make your coding workflow much more faster. Don’t forget to share your experiences in the comments.

Frequently Asked Questions (FAQs) about Mastering Emmet