Maison > outils de développement > VSCode > Parlons de la façon d'ajouter des touches de raccourci Emmet dans VSCode

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

青灯夜游
Libérer: 2022-09-08 20:31:33
avant
2865 Les gens l'ont consulté

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 !

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

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
Copier après la connexion

s'étendra à :

<div class="someClass">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
Copier après la connexion

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 + KCtrl + S 打开键盘快捷键窗口,在搜索框输入 Emmet,可以找出内置 Emmet 可以绑定热键的特定操作。

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

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

[]
Copier après la connexion

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

{
  "key": "<key combination>",
  "command": "<command to run>"
}
Copier après la connexion

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
Copier après la connexion

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

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"
  }
]
Copier après la connexion
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"
  }
]
Copier après la connexion

Commandes Emmet disponibles dans VS Code

Les commandes disponibles pour Emmet sont les suivantes :

[
  {
    "key": "alt+e alt+d",
    "command": "editor.emmet.action.removeTag"
  }
]
Copier après la connexion
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!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal