这篇文章主要介绍“VSCode中如何添加Emmet快捷键”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“VSCode中如何添加Emmet快捷键”文章能帮助大家解决问题。
专注于为中小企业提供网站建设、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业仙桃免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
Emmet 是一个自动将代码片段扩展为 HTML 的工具。它包含在 VS Code 中。
例如以下片段:
div.someClass>span*5
将展开为:
Emmet 还提供了其他一些快捷方式提升 HTML 开发效率。
推荐:Emmet 语法
组合键:
Ctrl + K
和Ctrl + S
打开键盘快捷键窗口,在搜索框输入 Emmet,可以找出内置 Emmet 可以绑定热键的特定操作。
按住 Ctrl + Shift + p
打开命令面板,输入 shortcut
,找到打开键盘快捷键方式的选项。
将打开一个按键绑定的 keybindings.json
文件:
[]
每个添加的自定义快捷方式都反映在此文件中,并具有以下结构:
{ "key": "", "command": " " }
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 键绑定。它可以用作预定义的键绑定组,以防您不知道映射到哪个键。
关于“VSCode中如何添加Emmet快捷键”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。