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

相关推荐

  • word页码从第二页开始为1怎么设置

    word页码从第二页开始为1设置的方法: 1、首先点击名列前茅页的页尾。 2、然后选择任务选项栏中的“布局”。 3、随后点击“分隔符”选择分节符下方的“下一页”。 4、随后到要进行设置的第二页页尾并选中页码。 5、点击上方的“链接到前一节”将其取消。 6、随后回到名列前茅页的页码,选中并将其删除。 …

    2022年9月22日
    5.0K00
  • 如何进行CaptureFramework框架分析

    一、背景 应用服务监控是智能运维系统的重要组成部分。在UAV系统中,中间件增强框架(MOF)探针提供了应用画像及性能数据收集等功能,其中数据收集功能主要采集四类数据:实时数据、画像数据、调用链接数据生成以及线程数据分析数据。为实现实时数据采集,UAVStack设计了CaptureFramework框…

    2022年9月5日
    62900
  • APT框架TajMahal怎么用

    概述 ‘TajMahal’是卡巴斯基实验室在2018年秋季发现的一个以前未知且技术复杂的APT框架。这个完整的间谍框架由两个名为“东京”和“横滨”的包组成。它包括后门,加载器,协调器,C2通信器,录音机,键盘记录器,屏幕和网络摄像头抓取器,文档和加密密钥窃取程序,甚至是受害者…

    2022年9月21日
    48900
  • python找不到文件如何解决

    解决方法: 1、点击进入“此电脑”。 2、右击“此电脑”点击“属性”。 3、点击左侧“高级系统设置”。 4、选择“高级”点击“环境变量”。 5、双击“path”。 6、点击“新建”。 7、将python的路径安装进去即可。 读到这里,这篇“python找不到文件如何解决”文章已经介绍完毕,想要掌握这…

    2022年9月8日
    1.7K00
  • css中id选择符的标识是哪个

    在css中,id选择符的标识是“#”,可以为标有特定id属性值的HTML元素指定特定的样式,语法结构“#ID值 {属性 : 属性值;}”。ID属性在整个页面中是少数不可重复的;ID属性值不要以数字开头,数字开头的ID在Mozilla/Firefox浏览器中不起作用。 本教程操作环境:windows7…

    2022年9月22日
    62300
  • MySQL数据库线上如何修改表结构

    一、MDL元数据锁 在修改表结构之前,先来看下可能存在的问题。 1、什么是MDL锁 MySQL有一个把锁,叫做MDL元数据锁,当对表修改的时候,会自动给表加上这把锁,也就是不需要自己显式使用。 当对表做增删改查的时候,加的是MDL读锁 当对表结构做变更修改的时候,加的是MDL写锁 读与读之间不互斥,…

    2022年9月8日
    74100
  • Windows wifi的ip地址指的是什么

    wifi的ip地址指的是路由器的管理员地址;wifi是一种高频无线电信号,相当于有线传输中的网线,ip地址是一种统一的地址格式,它为互联网上的每一个网络设备和每一台终端分配一个逻辑地址,根据路由器品牌型号的不同,其wifi的ip地址也会不同。 本教程操作环境:windows10系统、DELL G3电…

    2022年9月2日
    78900
  • echarts如何改变图表的颜色

    echarts改变图表颜色的方法 1、 打开编辑器新建study.html,并在头部引入echarts插件 2、在body区域新建一个div,并给div设置宽和高,用来生成柱状图 3、在script标签中加入柱状图相关代码 4、通过设置itemStyle下的color属性来改变柱状图颜色 5、完成之…

    2022年9月26日
    1.1K00
  • MySQL中的用户创建与权限管理怎么实现

    一、用户管理 在mysql库里有个user表可以查看已经创建的用户 1.创建MySQL用户 注意:MySQL中不能单纯通过用户名来说明用户,必须要加上主机。如hhy@10.1.1.1 基本语法: mysql> create user ‘用户名’@’被允许连接的主机名称或主机的IP地址’ ide…

    2022年9月2日
    64400
  • windows office365头像不同步怎么解决

    office365头像不同步: 答:office365头像不同步可能是组件方面的问题建议先更新一下office组件解决。 也可能是网络的问题导致没有那么快的进行同步,可以换一个快一点的网络试试。 还有就是微软方面的问题了,没有立刻反馈并同步,只样就只可以去等待一下了。 office365头像更改教程…

    2022年9月21日
    1.3K00
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

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

分享本页
返回顶部