Using Emmet for Faster Coding

Using Emmet

To access Emmet commands, right-click in the editor, select Emmet and then select an Emmet command. Or, use the keyboard shortcut assigned to the Emmet command. If you prefer different keyboard shortcuts you have the option to edit the key bindings in Window>Preferences>General> Keys.

Accessing Emmet commands

Abbreviations

One of the most powerful Emmet commands is Expand Abbreviation. With Emmet you can use abbreviations that are parsed in runtime to generate structured blocks of code. These abbreviations are based on CSS selectors allowing you to get up and running on Emmet in no time. The generated code includes tabstops that allow you to quickly traverse the code using the Tab key. Emmet works in (X)HTML, CSS, XML, XSL and JSP files. It will even give you CSS specific expansions in the CSS sections in HTML files and HTML support at appropriate locations in JSP files.

Tip: To view a cheat sheet with Emmet syntax and examples, right-click in the Editor and select Emmet>Emmet Cheat Sheet.

Watch the following demo to see Emmet Abbreviations in action and then you can even try it yourself.

Abbreviation Examples

In an HTML file, type nav>ul>li and press Ctrl+Alt+Enter. The following code is generated:

<nav>
   <ul>
     <li>
     </li>
   </ul>
</nav>

For a more complicated example, type ul>li.item$*5 and press Ctrl+Alt+Enter. The following code is generated:

<ul>
   <li class="item1"></li>
   <li class="item2"></li>
   <li class="item3"></li>
   <li class="item4"></li>
   <li class="item5"></li>
</ul>

Here are a couple of CSS examples:

• bd:n expands to border: none;
• ff:v expands to font-family: Verdana, Geneva, sans-serif;

Additional Emmet Commands

In addition to the Expand Abbreviations command, there are a number of others actions available from the Emmet menu that speed up coding.

• Numbers>Increment Number by 1 (Ctrl+Alt+Right) / Decrement Number by 1 (Ctrl+Alt+Left)
  Increases or decreases the number by 1. There are additional options to adjust the number by 10 or 0.1.
• Balance (inward) (Ctrl+9 / Balance (outward) (Ctrl+0)
  Selects tag’s content and/or opening and closing tags. Expands outward/inward when action is repeated.
• HTML>Go to Matching Pair (Ctrl+Alt+T)
  Goes to corresponding opening or closing HTML tag.
• HTML>Remove Tag (Ctrl+Shift+I)
  Removes the tag at current position.
• HTML>Split/Join Tag (Alt+J)
  Splits (<tag /> → <tag></tag>) or joins (<tag></tag> → <tag />) tag at current position.
• Merge Lines (Ctrl+Alt+M)
  Merges selected lines into a single line. With no selection, automatically matches nearest HTML tag.
• Select Next Item (Ctrl+Alt+.) / Select Previous Item (Ctrl+Alt+,)
  Selects next or previous important HTML/CSS code parts.
• Toggle Comment (Ctrl+Alt+/)
  Toggles current line to/from a comment. Matches HTML tag, CSS property or rule when there’s no selection.
• Wrap With Abbreviation (Ctrl+Alt+W)
  Same as Expand Abbreviation action but wraps selected content.