Actions
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.