Emmet commands and keybindings

According to Emmet documentation Emmet has three base features:

1. abbreviation expanding
2. Emmet actions - the commands for advanced editing of HTML code
3. Emmet snippets

We all know about the first feature, but I suggest you pay attention to Emmet actions.

Emmet actions

Emmet actions may be very useful. For example:

• remove element
  • Emmet docs demo
  • demo below
• select element content or whole element or parent element (balance in/out)
  • Emmet docs demo
  • demo below
• iterate by edit points after the abbreviation is expanded
  • Emmet docs demo
  • demo below
• select a tag name and attributes to edit
  • Emmet docs demo
  • demo below
• wrap some html-code with abbreviation
  • Emmet docs demo
  • demo below
• wrap with abbreviation the every line individually
  • Emmet docs demo
  • demo below
• rename element
  • demo below
• and some other

In this extension:

• Added a keybinding system for the most used commands. You may see the keybindings if you open the above submenu.
• Creates a submenu of the editor title menu with all existing in VS Code Emmet commands.
• The titles of existing in VS Code command have changed to more understandable.
• If you will add your own keybindings - you will see your keybindings in the above submenu.

Keybindings

Alt+E, E	Expand abbreviation.
Ctrl+Shift+A	Balance out.
Alt+<	Previous edit point.
Alt+>	Next edit point.
Ctrl+Alt+<	Previous item.
Ctrl+Alt+>	Next item.
Alt+E, D	Delete tag.
Alt+E, R	Rename tag.
Alt+E, W	Wrap with abbreviation.
Alt+E, M	Merge lines.
Alt+E, =	Evaluate math expression.
Alt+E, Alt+/	Toggle comment (to HTML only).

Notes:

• Not all commands existing in the Emmet documentation have implemented in VS Code.
• Assigned keybindings does not correspond to the keybindings of Emmet documentation.

Balance out demo

Ctrl+Shift+A	Select the content of an element, then the element with tags, then the content of parent element, ect.

Wrap with abbreviation demo

Wrap everything together

Alt+E, W

Wrap the every line individually

Alt+E, W

Rename tag demo

Alt+E, R

Delete tag demo

Alt+E, D

Items and edit points demo

Alt+<	Previous edit point.
Alt+>	Next edit point.
Ctrl+Alt+<	Previous item.
Ctrl+Alt+>	Next item.

Menu of all Emmet commands.

Keybinding	Command / Title
Alt+E, E	editor.emmet.action.expandAbbreviation Emmet: Expand Abbreviation
	editor.emmet.action.matchTag Emmet: HTML - Go to - Match Tag
Alt+>	editor.emmet.action.nextEditPoint Emmet: HTML - Go to - Next Edit Point
Alt+<	editor.emmet.action.prevEditPoint Emmet: HTML - Go to - Prev Edit Point
	editor.emmet.action.balanceIn Emmet: HTML - Select - Balance In
Ctrl+Shift+A	editor.emmet.action.balanceOut Emmet: HTML - Select - Balance Out
Ctrl+Alt+>	editor.emmet.action.selectNextItem Emmet: HTML - Select - Next Item
Ctrl+Alt+<	editor.emmet.action.selectPrevItem Emmet: HTML - Select - Previous Item
Alt+E, D	editor.emmet.action.removeTag Emmet: HTML - Delete Tag
Alt+E, R	editor.emmet.action.updateTag Emmet: HTML - Rename Tag
	editor.emmet.action.splitJoinTag Emmet: HTML - Split / Join Tag
Alt+E, Alt+/	editor.emmet.action.toggleComment Emmet: HTML - Toggle Comment
Alt+E, W	editor.emmet.action.wrapWithAbbreviation Emmet: HTML - Wrap With Abbreviation
Alt+E, =	editor.emmet.action.evaluateMathExpression Emmet: Evaluate Math Expression
Alt+E, M	editor.emmet.action.mergeLines Emmet: Merge Lines
	editor.emmet.action.reflectCSSValue Emmet: Reflect CSS Value
	editor.emmet.action.updateImageSize Emmet: Update ImageSize
	editor.emmet.action.incrementNumberByOne Emmet: Number - Increment - By One
	editor.emmet.action.incrementNumberByOneTenth Emmet: Number - Increment - By One Tenth
	editor.emmet.action.incrementNumberByTen Emmet: Number - Increment - By Ten
	editor.emmet.action.decrementNumberByOne Emmet: Number - Decrement - By One
	editor.emmet.action.decrementNumberByOneTenth Emmet: Number - Decrement - By One Tenth
	editor.emmet.action.decrementNumberByTen Emmet: Number - Decrement - By Ten