PHP程序员小白到大牛集训(12期免息)
首页 >开发工具 >VSCode > 正文

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

转载2022-09-08 20:31:331251 + php学习QQ群(点击入群)
本篇文章带大家了解一下VSCode中的Emmet工具,介绍一下VSCode中Emmet绑定热键的方法,用以提升 HTML 编辑效率,希望对大家有所帮助!

php入门到就业线上直播课:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

Emmet 是一个自动将代码片段扩展为 HTML 的工具。它包含在 VS Code 中。【推荐学习:《vscode入门教程》】

例如以下片段:

div.someClass>span*5
登录后复制

将展开为:

登录后复制

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

推荐:Emmet 语法

添加 VS Code 快捷方式

组合键:Ctrl + KCtrl + S 打开键盘快捷键窗口,在搜索框输入 Emmet,可以找出内置 Emmet 可以绑定热键的特定操作。

按住 Ctrl + Shift + p 打开命令面板,输入 shortcut,找到打开键盘快捷键方式的选项。

将打开一个按键绑定的 keybindings.json 文件:

[]
登录后复制

每个添加的自定义快捷方式都反映在此文件中,并具有以下结构:

{
  "key": "",
  "command": ""
}
登录后复制

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 键绑定。它可以用作预定义的键绑定组,以防您不知道映射到哪个键。

更多资料

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

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

以上就是聊聊VSCode中怎么添加Emmet快捷键的详细内容,更多请关注php中文网其它相关文章!

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

  • 相关标签:Emmet VSCode
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐