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"
  }
]

Jede benutzerdefinierte Tastenkombination, die hinzugefügt wird, wird in dieser Datei widergespiegelt und hat die folgende Struktur:

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

Emmet-Befehle im VS-Code verfügbar

Die verfügbaren Befehle für Emmet sind wie folgt:

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

Im Folgenden finden Sie einige Beispiele. Wir verwenden die Kombination aus alt + e und alt + *. Die Tastenanschläge können mit dem System und anderer Software in Konflikt geraten. Passen Sie sie einfach an Ihre Bedürfnisse an.

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

– Entfernt ein Tag aus dem HTML-Baum, behält aber seinen inneren HTML-Code bei.

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.

Weitere Informationen🎜🎜🎜Es gibt auch viele nützliche Abkürzungen, wie 🎜Mit Abkürzung umschließen🎜 und 🎜Tag entfernen🎜. Schauen Sie sich diese an, um mehr zu erfahren. 🎜🎜Weitere Informationen zu VSCode finden Sie unter: 🎜vscode-Tutorial🎜! 🎜🎜

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!