VSCode中如何添加Emmet快捷键

这篇文章主要介绍“VSCode中如何添加emmet快捷键”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“VSCode中如何添加emmet快捷键”文章能帮助大家解决问题。

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

例如以下片段:

div.someClass>span*5

将展开为:

<div class="someClass">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

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

推荐:emmet 语法

添加 VS Code 快捷方式

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

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

[
  {
    "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快捷键”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程之家行业资讯频道,小编每天都会为大家更新不同的知识点。

相关文章

蚂蚁庄园小课堂2024年6月29日答案是什么?进入支付宝一起饲养...
谷歌小恐龙怎么调出来,我们将连接电脑的网络拔掉或者禁用网...
蚂蚁庄园小课堂2024年6月22日答案是什么?每天蚂蚁庄园小课堂...
火绒为什么不建议大家用,火绒对于用户的要求比较高,查杀病...
百度网盘电脑版订阅的分享在哪?百度网盘电脑版订阅的分享在什...
notepad怎么替换换行符,打开notepad++软件,点击菜单栏的视...