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

相关推荐

  • php类中的rewind方法如何用

    在php中,rewind()函数方法用于将文件指针的位置倒回文件的开头,若指针的位置倒回成功,则该函数返回的结果是true,如果指针的位置倒回不成功,则该函数的返回结果是false,语法为“rewind(规定已打开的文件)”。 本文操作环境:Windows10系统、PHP8.1版、Dell G3电脑…

    2022年6月27日
    18600
  • Nmap如何快速上手

    1.安装 https://nmap.org/,不做过多赘述 2.靶机搭建 本文使用靶机为OWASP Broken Web Applications Project https://sourceforge.net/projects/owaspbwa/ 靶机地址1:192.168.154.128 靶机地…

    2022年9月15日
    21000
  • windows安装不了qq游戏如何解决

    qq游戏安装不了解决方法: 方法一: 1、首先确认我们电脑里之前有没有安装过qq游戏。 2、如果之前安装过,需要先将之前的qq游戏给卸载。 3、如果没有安装过,可能是下载的安装包有问题。 4、我们可以去官网下载或者点击右边链接重新下载安装。 5、如果我们正在使用360等安全软件的话,尝试将这些软件都…

    2022年8月29日
    38600
  • sql与mysql有哪些区别

    区别:1、SQL是一种结构化查询语言,而MySQL是一种数据库软件,使用SQL语言来查询数据库;2、SQL不提供连接工具,而MySQL提供工具,可用一个名为“MySQL工作台”的集成工具来设计和开发数据库;3、SQL用于查询和操作数据库系统,而MySQL用于以表格格式处理、存储、检索、修改和管理数据…

    2022年9月24日
    62900
  • MySQL占用内存过大如何解决

    前言 对于部分小资玩家来说,服务器数量和内存往往是很有限的,像我个人的服务器配置就是2核4G5M。 4G内存对于Java玩家来说,真的不大,开几个中间件+自己的微服务真的还蛮挤的,然后又摊上MySQL这个大冤种。我本机上的MySQL仅仅只占几M内存(虽然我不怎么用,但是本机MySQL确实是开着的):…

    2022年9月16日
    51800
  • windows cpu占用过高加内存条有没有用

    cpu占用过高加内存条作用解答 cpu占用率高,加内存条不能起到降低cpu作用。 加是与CPU直接交换数据的内部存储器,RAM在计算机和数字系统中用来暂时存储程序、数据和中间结果。 CPU是计算机中负责读取指令,对指令译码并执行指令的核心部件。中央处理器主要包括两个部分,即控制器、运算器,其中还包括…

    2022年9月2日
    26500
  • ai钢笔工具如何使用

    ai钢笔工具的使用方法和技巧: 1、在ai左边工具栏,可以找到“钢笔工具” 2、选中钢笔工具后,在画布上点一个点可以创建锚点。 3、点击第二个点,就能生成一条直线,点第三个点,就能再画出一条直线。以此类推。 4、如果想要绘制曲线,只要点下锚点后,不松开,拖动鼠标就可以了。 5、如果要删除锚点,只要点…

    2022年8月30日
    24400
  • mysql的安装路径如何查看

    查看方法:1、鼠标右击“计算机”图标,在打开的菜单中点击“管理”;2、依次点击“服务和应用程序”-“服务”;3、在右侧服务列表中,找到mysql服务;4、选中mysql服务,点击鼠标右键,在打开的菜单中选择“属性”;5、在“mysql属性”弹窗中,查看“可执行文件路径”选项的值即可,该选项的值就是M…

    2022年9月24日
    88600
  • 如何进行Linux恶意软件SkidMap分析

    挖掘加密货币恶意软件仍然是一个普遍的威胁。网络罪犯也越来越多地探索新的平台和方法来进一步利用挖矿恶意软件——从移动设备、Unix和类Unix系统到服务器和云环境。 攻击者不断提升恶意软件抵御检测的能力。例如,将恶意软件与看门狗组件捆绑在一起,以确保非法的加密货币挖掘活动在受感染的机器中持续存在,或者…

    2022年9月20日
    28900
  • windows会声会影x5如何导出视频

    会声会影x5导出视频的方法 1、我们可以在界面的左上角或者上方找到“分享”按钮,点击它。 2、然后选择想要导出的方式,一般我们选择“创建视频文件”。 3、然后我们点击如图“创建视频文件”可以选择视频的格式。 4、这里我们选择mp4格式(大家可以根据需要自行选择),然后还可以选择更细致的格式。 5、选…

    2022年9月15日
    19700
站长微信
站长微信
电话联系

400-800-1024

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

分享本页
返回顶部