Parlons de la façon d'ajouter des touches de raccourci Emmet dans VSCode

Cet article vous présentera l'outil Emmet dans VSCode et présentera la méthode de liaison des raccourcis clavier Emmet dans VSCode pour améliorer l'efficacité de l'édition HTML. J'espère que cela sera utile à tout le monde !

Emmet est un outil qui développe automatiquement les extraits de code en HTML. Il est inclus avec VS Code. [Apprentissage recommandé : "Tutoriel d'introduction au vscode"]

Par exemple, le fragment suivant :

div.someClass>span*5

s'étendra à :

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

Emmet fournit également d'autres raccourcis pour améliorer l'efficacité du développement HTML.

Recommandé : Emmet Syntax

Ajouter des raccourcis VS Code

Combinaisons de touches : Ctrl + K et Ctrl + S pour ouvrir la fenêtre des raccourcis clavier , saisissez Emmet dans la zone de recherche pour connaître les opérations spécifiques auxquelles Emmet intégré peut lier des raccourcis clavier. 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 + *

Maintenez Ctrl + Shift + p pour ouvrir le panneau de commande, saisissez raccourci et recherchez l'option pour activer les raccourcis clavier.

Un fichier de raccourcis clavier keybindings.json s'ouvrira :

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

Chaque raccourci personnalisé ajouté est reflété dans ce fichier et a la structure suivante :

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

Commandes Emmet disponibles dans VS Code

Les commandes disponibles pour Emmet sont les suivantes :

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

Voici quelques exemples. Nous utilisons la combinaison de alt + e et alt + *. Les frappes peuvent entrer en conflit avec le système et d'autres logiciels. Ajustez-les simplement à votre convenance.

Smooth In/Smooth Out — Recherche une étiquette ou les limites du contenu de l'étiquette à partir de la position actuelle du curseur et la sélectionne. rrreee

Aller à la balise associée — Sauter entre les balises d'élément d'ouverture et de fermeture. rrreeeRemove Tag

— Supprime une balise de l'arborescence HTML mais conserve son code HTML interne.

rrreeeDe plus, si vous ne souhaitez pas configurer vous-même les raccourcis clavier, vous pouvez installer l'extension Emmet Keybindings
, qui est un ensemble de raccourcis clavier Emmet pour VS Code. Il peut être utilisé comme groupe de raccourcis clavier prédéfini au cas où vous ne sauriez pas à quelle clé mapper.

🎜🎜Plus d'informations🎜🎜🎜Il existe également de nombreuses abréviations utiles, telles que 🎜Wrap with Abbreviation🎜 et 🎜Remove Tag🎜, consultez-les pour en savoir plus. 🎜🎜Pour plus de connaissances sur VSCode, veuillez visiter : 🎜Tutoriel vscode🎜 ! 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!