Emmet allows you to write large HTML code blocks at speed of light using well-known CSS selectors. But it’s not the only thing that every web-developer needs: occasionally you have to edit your HTML and CSS code to fix bugs and add new features.

Emmet offers very unique tools that can greatly improve your editing experience:

Expand Abbreviation
Yep, this is the action that expands CSS-like abbreviations into HTML code.
Match Tag Pair
Selects content, and/or opening and closing HTML tag name from current caret position (a.k.a “balancing”). Super-awesome implementation that works even in non-HTML syntaxes! Implicitly used by many Emmet actions.
Go to Matching Pair
Quickly traverses between opening and closing HTML tag.
Wrap with Abbreviation
Same as “Expand Abbreviation” action but intelligently wraps selected content.
Go to Edit Point
Quickly traverse between important HTML code points.
Select Item
Quickly select important HTML and CSS code parts.
Toggle Comment
Toggles comment. Unlike basic editor’s implementations, matches HTML tag, CSS property or rule when there’s no selection.
Split/Join Tag
Splits (<tag /><tag></tag>) or joins (<tag></tag><tag />) HTML/XML tag under current caret position.
Remove Tag
Gracefully removes HTML/XML tag under current caret position.
Merge Lines
Merges selected lines into single one. With no selection, automatically matches nearest HTML tag.
Update Image Size
Updates matched HTML tag or CSS rule with image size, located under caret.
Evaluate Math Expression
Evaluates simple math expression
Increment/Decrement Number
Increments or decrements number under current caret position with given step.
Reflect CSS Value
Automatically copies CSS value under current caret position to all vendor-prefixed variants.
Encode/Decode Image to data:URL
Encodes image under caret to data:URL format and vice versa.
comments powered by Disqus