聊聊VSCode中怎么添加Emmet快捷键

本篇文章带大家了解一下vscode中的emmet工具,介绍一下vscode中emmet绑定热键的方法,用以提升 html 编辑效率,希望对大家有所帮助!

聊聊VSCode中怎么添加Emmet快捷键

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 语法

添加 VS Code 快捷方式

组合键: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 + * 组合,按键可能会因为系统和其他软件冲突,调整到自己舒服即可。

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

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

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

更多资料

还有许多有用的缩写,例如 vscodevscode ,查阅它们以了解更多。

更多关于vscode的相关知识,请访问:vscode

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享