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

文章标题:VSCode中如何添加Emmet快捷键,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/24070

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云
上一篇 2022年9月8日 下午10:58
下一篇 2022年9月8日 下午11:00

相关推荐

  • 2024年9款优质CRM系统全方位解析

    文章介绍的工具有:纷享销客、Zoho CRM、八百客、红圈通、简道云、简信CRM、Salesforce、HubSpot CRM、Apptivo。 在选择合适的CRM系统时,许多企业面临着功能繁多、选择困难的痛点。对于中小企业来说,找到一个既能提高客户关系管理效率,又能适应业务扩展的CRM系统尤为重要…

    2024年7月25日
    1600
  • 数据库权限关系图表是什么

    数据库权限关系图表是一种以图表形式展示数据库权限分配和管理的工具。它可以有效地帮助我们理解和管理数据库中的各种权限关系。数据库权限关系图表主要包含以下几个部分:数据对象、用户(或用户组)、权限类型、权限级别、权限状态等。其中,数据对象是权限关系图表中的核心元素,它代表了数据库中的各种数据资源,如表、…

    2024年7月22日
    200
  • 诚信数据库是什么意思

    诚信数据库是一种收集、存储和管理个人或组织诚信信息的系统。它是一种用于评估和管理个人或组织行为的工具,通常由政府、商业组织或者非营利组织进行运营。诚信数据库的主要功能包括:1、评估个人或组织的诚信状况;2、提供决策支持;3、预防和控制风险;4、促进社会信用体系建设。 在这四大功能中,评估个人或组织的…

    2024年7月22日
    400
  • 数据库期末关系代数是什么

    关系代数是一种对关系进行操作的代数系统,是关系模型的数学基础,主要用于从关系数据库中检索数据。其操作包括选择、投影、并集、差集、笛卡尔积、连接、除法等。其中,选择操作是对关系中的元组进行筛选,只保留满足某一条件的元组;投影操作则是从关系中选择出一部分属性构造一个新的关系。 一、选择操作 选择操作是关…

    2024年7月22日
    700
  • mysql建立数据库用什么命令

    在MySQL中,我们使用"CREATE DATABASE"命令来创建数据库。这是一个非常简单且基础的命令,其语法为:CREATE DATABASE 数据库名。在这个命令中,“CREATE DATABASE”是固定的,而“数据库名”则是你要创建的数据库的名称,可以自己设定。例如,如…

    2024年7月22日
    500
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部