• 技术文章 >开发工具 >VSCode

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

    青灯夜游青灯夜游2022-09-08 20:31:33转载799
    本篇文章带大家了解一下VSCode中的Emmet工具,介绍一下VSCode中Emmet绑定热键的方法,用以提升 HTML 编辑效率,希望对大家有所帮助!

    php入门到就业线上直播课:进入学习

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

    例如以下片段:

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

    更多资料

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

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

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

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Emmet VSCode
    上一篇:简单实战分享:带你聊聊VScode插件开发 下一篇:浅析VSCode CLI工具,原来它这么有用!
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 23个提高开发效率的前端VSCode插件(快来收藏)• 10 个VSCode 的高效开源神器,看看有没有需要的!• VSCode中值得推荐的11个划水插件,一起愉快的划水摸鱼吧!• 【整理分享】6 个 Vue3 开发必备的 VSCode 插件• VSCode开发Python,这 14 个插件不可错过!• 【整理分享】VSCode中常用且高效的使用小技巧(奇技淫巧)
    1/1

    PHP中文网