本篇文章带大家了解一下VSCode中的Emmet工具，介绍一下VSCode中Emmet绑定热键的方法，用以提升 HTML 编辑效率，希望对大家有所帮助！
Emmet 是一个自动将代码片段扩展为 HTML 的工具。它包含在 VS Code 中。【推荐学习：《vscode入门教程》】
例如以下片段：
div.someClass>span*5
将展开为：
<div class="someClass"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
Emmet 还提供了其他一些快捷方式提升 HTML 开发效率。
推荐：Emmet 语法
组合键：
Ctrl + K和Ctrl + S打开键盘快捷键窗口，在搜索框输入 Emmet，可以找出内置 Emmet 可以绑定热键的特定操作。
按住 Ctrl + Shift + p 打开命令面板，输入 shortcut，找到打开键盘快捷键方式的选项。
将打开一个按键绑定的 keybindings.json 文件：
[]
每个添加的自定义快捷方式都反映在此文件中，并具有以下结构：
{
"key": "<key combination>",
"command": "<command to run>"
}
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 + * 组合，按键可能会因为系统和其他软件冲突，调整到自己舒服即可。
平滑向内/平滑向外 — 从当前插入符号位置搜索标签或标签的内容边界并选择它。
[
{
"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 键绑定。它可以用作预定义的键绑定组，以防您不知道映射到哪个键。
还有许多有用的缩写，例如 Wrap with Abbreviation 和 Remove Tag ，查阅它们以了解更多。
更多关于VSCode的相关知识，请访问：vscode教程！
以上是聊聊VSCode中怎么添加Emmet快捷键的详细内容。更多信息请关注PHP中文网其他相关文章！