VSCode中如何添加Emmet快捷鍵

這篇文章主要介紹“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 開發(fā)效率。

推薦：Emmet 語法

添加 VS Code 快捷方式

組合鍵：Ctrl + K 和 Ctrl + 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 + e 和 alt + * 組合，按鍵可能會因為系統和其他軟件沖突，調整到自己舒服即可。

平滑向內/平滑向外 — 從當前插入符號位置搜索標簽或標簽的內容邊界并選擇它。

[
  {
    "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快捷鍵”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。