Lassen Sie uns darüber sprechen, wie Sie Emmet-Tastenkombinationen in VSCode hinzufügen

Dieser Artikel stellt Ihnen das Emmet-Tool in VSCode vor und stellt die Methode zum Binden von Emmet-Hotkeys in VSCode vor, um die Effizienz der HTML-Bearbeitung zu verbessern.

Emmet ist ein Tool, das Codeausschnitte automatisch in HTML erweitert. Es ist im VS-Code enthalten. [Empfohlenes Lernen: „Vscode-Einführungs-Tutorial“]

Zum Beispiel wird das folgende Fragment:

div.someClass>span*5

erweitert zu:

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

Emmet bietet auch einige andere Verknüpfungen, um die Effizienz der HTML-Entwicklung zu verbessern.

Empfohlen: Emmet-Syntax

VS-Code-Verknüpfungen hinzufügen

Tastenkombinationen: Strg + K und Strg + S, um das Fenster mit den Tastaturkürzeln zu öffnen Geben Sie Emmet in das Suchfeld ein, um die spezifischen Vorgänge herauszufinden, an die der integrierte Emmet Hotkeys binden kann. Ctrl + K 和 Ctrl + S 打开键盘快捷键窗口，在搜索框输入 Emmet，可以找出内置 Emmet 可以绑定热键的特定操作。

按住 Ctrl + Shift + p 打开命令面板，输入 shortcut，找到打开键盘快捷键方式的选项。

将打开一个按键绑定的 keybindings.json 文件：

[]

每个添加的自定义快捷方式都反映在此文件中，并具有以下结构：

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

VS Code 中可用的 Emmet 命令

Emmet 的可用命令如下：

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

以下是其中的部分示例。我们使用 alt + e 和 alt + *

Halten Sie Strg + Umschalt + p gedrückt, um das Befehlsfeld zu öffnen, geben Sie Verknüpfung ein und finden Sie die Option zum Aktivieren von Tastaturkürzeln.

Eine Tastenkombinationsdatei keybindings.json wird geöffnet:

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

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

Emmet-Befehle im VS-Code verfügbar

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

Nach innen glätten/nach außen glätten – Sucht ab der aktuellen Caret-Position nach einem Etikett oder den Inhaltsgrenzen des Etiketts und wählt es aus. rrreee

Gehe zu gepaartem Tag – Wechseln Sie zwischen den öffnenden und schließenden Element-Tags. rrreeeTag entfernen

rrreeeWenn Sie Hotkeys nicht selbst konfigurieren möchten, können Sie die Erweiterung „Emmet Keybindings“ installieren, bei der es sich um eine Reihe von Emmet-Tastenkombinationen für VS Code handelt. Sie kann als vordefinierte Tastenkombinationsgruppe verwendet werden, falls Sie nicht wissen, welcher Taste Sie sie zuordnen sollen.

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie Emmet-Tastenkombinationen in VSCode hinzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!