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

 3633

本篇文章带大家了解一下VSCode中的Emmet工具,介绍一下VSCode中Emmet绑定热键的方法,用以提升 HTML 编辑效率,希望对大家有所帮助!


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


Emmet 是一个自动将代码片段扩展为 HTML 的工具。它包含在 VS Code 中。

例如以下片段:

  1. div.someClass>span*5

将展开为:

  1. <div class="someClass">
  2.   <span></span>
  3.   <span></span>
  4.   <span></span>
  5.   <span></span>
  6.   <span></span>
  7. </div>

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


添加 VS Code 快捷方式

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

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

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

  1. []

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

  1. {
  2.   "key": "<key combination>",
  3.   "command": "<command to run>"
  4. }

VS Code 中可用的 Emmet 命令

Emmet 的可用命令如下:

  1. editor.emmet.action.balanceIn
  2. editor.emmet.action.balanceOut
  3. editor.emmet.action.decrementNumberByOne
  4. editor.emmet.action.decrementNumberByOneTenth
  5. editor.emmet.action.decrementNumberByTen
  6. editor.emmet.action.evaluateMathExpression
  7. editor.emmet.action.incrementNumberByOne
  8. editor.emmet.action.incrementNumberByOneTenth
  9. editor.emmet.action.incrementNumberByTen
  10. editor.emmet.action.matchTag
  11. editor.emmet.action.mergeLines
  12. editor.emmet.action.nextEditPoint
  13. editor.emmet.action.prevEditPoint
  14. editor.emmet.action.reflectCSSValue
  15. editor.emmet.action.removeTag
  16. editor.emmet.action.selectNextItem
  17. editor.emmet.action.selectPrevItem
  18. editor.emmet.action.splitJoinTag
  19. editor.emmet.action.toggleComment
  20. editor.emmet.action.updateImageSize
  21. editor.emmet.action.updateTag
  22. editor.emmet.action.wrapIndividualLinesWithAbbreviation
  23. editor.emmet.action.wrapWithAbbreviation

以下是其中的部分示例。我们使用 alt + e 和 alt + * 组合,按键可能会因为系统和其他软件冲突,调整到自己舒服即可。

平滑向内/平滑向外 — 从当前插入符号位置搜索标签或标签的内容边界并选择它。

  1. [
  2.   {
  3.     "key": "alt+e alt+i",
  4.     "command": "editor.emmet.action.balanceIn"
  5.   },
  6.   {
  7.     "key": "alt+e alt+o",
  8.     "command": "editor.emmet.action.balanceOut"
  9.   }
  10. ]

转到配对标签 — 在开始和结束元素标签之间跳转。

  1. [
  2.   {
  3.     "key": "alt+e alt+e",
  4.     "command": "editor.emmet.action.matchTag"
  5.   }
  6. ]

删除标签 — 从 HTML 树中删除标签但保留其内部 HTML。

  1. [
  2.   {
  3.     "key": "alt+e alt+d",
  4.     "command": "editor.emmet.action.removeTag"
  5.   }
  6. ]

另外,如果你不想自己配置热键,可以安装 Emmet Keybindings 扩展,它是一组用于 VS Code 的 Emmet 键绑定。它可以用作预定义的键绑定组,以防您不知道映射到哪个键。


更多资料

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


本文网址:https://www.zztuku.com/detail-13071.html
站长图库 - 聊聊VSCode中怎么添加Emmet快捷键
申明:本文转载于《掘金社区》,如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐