怎么在VSCode中添加Emmet快捷键

此处内容已经被作者隐藏，请输入验证码查看内容

验证码：

请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“钞能力。你在哪？”或者“mdyc919293”或者微信扫描右侧二维码关注公众号。

一淘模板（56admin.com）本篇文章带大家了解一下VSCode中的Emmet工具，介绍一下VSCode中Emmet绑定热键的方法，用以提升 HTML 编辑效率，希望对大家有所帮助！

Emmet 是一个自动将代码片段扩展为 HTML 的工具。它包含在 VS Code 中。

例如以下片段：

div.someClass>span*5

将展开为：

Emmet 还提供了其他一些快捷方式提升 HTML 开发效率。

添加 VS Code 快捷方式

组合键：Ctrl + K 和 Ctrl + S 打开键盘快捷键窗口，在搜索框输入 Emmet，可以找出内置 Emmet 可以绑定热键的特定操作。

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

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

[]

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

{  "key": "",  "command": ""}

VS Code 中可用的 Emmet 命令

Emmet 的可用命令如下：

editor.emmet.action.balanceIneditor.emmet.action.balanceOuteditor.emmet.action.decrementNumberByOneeditor.emmet.action.decrementNumberByOneTentheditor.emmet.action.decrementNumberByTeneditor.emmet.action.evaluateMathExpressioneditor.emmet.action.incrementNumberByOneeditor.emmet.action.incrementNumberByOneTentheditor.emmet.action.incrementNumberByTeneditor.emmet.action.matchTageditor.emmet.action.mergeLineseditor.emmet.action.nextEditPointeditor.emmet.action.prevEditPointeditor.emmet.action.reflectCSSValueeditor.emmet.action.removeTageditor.emmet.action.selectNextItemeditor.emmet.action.selectPrevItemeditor.emmet.action.splitJoinTageditor.emmet.action.toggleCommenteditor.emmet.action.updateImageSizeeditor.emmet.action.updateTageditor.emmet.action.wrapIndividualLinesWithAbbreviationeditor.emmet.action.wrapWithAbbreviation

以下是其中的部分示例。我们使用 alt + e 和 alt + * 组合，按键可能会因为系统和其他软件冲突，调整到自己舒服即可。

平滑向内/平滑向外 — 从当前插入符号位置搜索标签或标签的内容边界并选择它。

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

删除标签 — 从 HTML 树中删除标签但保留其内部 HTML。

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

另外，如果你不想自己配置热键，可以安装 Emmet Keybindings 扩展，它是一组用于 VS Code 的 Emmet 键绑定。它可以用作预定义的键绑定组，以防您不知道映射到哪个键。