Let’s talk about how to add Emmet shortcut keys in VSCode

This article will take you to learn about the Emmet tool in VSCode, and introduce the method of binding Emmet hotkeys in VSCode to improve HTML editing efficiency. I hope it will be helpful to everyone!

#Emmet is a tool that automatically expands code snippets into HTML. It's included with VS Code. [Recommended learning: "vscode introductory tutorial"]

For example, the following fragment:

div.someClass>span*5

will expand to:

<div class="someClass">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Emmet also provides some other Shortcuts improve HTML development efficiency.

Recommended: Emmet syntax

Add VS Code shortcut

Key combination : Ctrl K and Ctrl S Open the keyboard shortcut window and enter Emmet in the search box to find out the specific operations that the built-in Emmet can bind hotkeys to.

Hold Ctrl Shift p to open the command panel, enter shortcut, and find the option Open keyboard shortcuts.

A key bindings keybindings.json file will be opened:

[]

Every custom shortcut added is reflected in this file and has the following structure :

{
  "key": "<key combination>",
  "command": "<command to run>"
}

Emmet commands available in VS Code

The available commands for Emmet are as follows:

editor.emmet.action.balanceIn
editor.emmet.action.balanceOut
editor.emmet.action.decrementNumberByOne
editor.emmet.action.decrementNumberByOneTenth
editor.emmet.action.decrementNumberByTen
editor.emmet.action.evaluateMathExpression
editor.emmet.action.incrementNumberByOne
editor.emmet.action.incrementNumberByOneTenth
editor.emmet.action.incrementNumberByTen
editor.emmet.action.matchTag
editor.emmet.action.mergeLines
editor.emmet.action.nextEditPoint
editor.emmet.action.prevEditPoint
editor.emmet.action.reflectCSSValue
editor.emmet.action.removeTag
editor.emmet.action.selectNextItem
editor.emmet.action.selectPrevItem
editor.emmet.action.splitJoinTag
editor.emmet.action.toggleComment
editor.emmet.action.updateImageSize
editor.emmet.action.updateTag
editor.emmet.action.wrapIndividualLinesWithAbbreviation
editor.emmet.action.wrapWithAbbreviation

The following are some examples. We use the combination of alt e and alt *. The keys may conflict with the system and other software. Just adjust them to your comfort.

Smooth In/Smooth Out — Searches for a label or label's content bounds from the current caret position and selects it.

[
  {
    "key": "alt+e alt+i",
    "command": "editor.emmet.action.balanceIn"
  },
  {
    "key": "alt+e alt+o",
    "command": "editor.emmet.action.balanceOut"
  }
]

Go to pairing tag — Jump between the opening and closing element tags.

[
  {
    "key": "alt+e alt+e",
    "command": "editor.emmet.action.matchTag"
  }
]

Remove Tag — Removes a tag from the HTML tree but retains its inner HTML.

[
  {
    "key": "alt+e alt+d",
    "command": "editor.emmet.action.removeTag"
  }
]

Also, if you don’t want to configure hotkeys yourself, you can install the Emmet Keybindings extension, which is a set of Emmet keybindings for VS Code. It can be used as a predefined key binding group in case you don't know which key to map to.

More information

There are also many useful abbreviations, such as Wrap with Abbreviation and Remove Tag, check them out to learn more.

For more knowledge about VSCode, please visit: vscode tutorial!

The above is the detailed content of Let’s talk about how to add Emmet shortcut keys in VSCode. For more information, please follow other related articles on the PHP Chinese website!