首頁 > 開發工具 > VSCode > 主體

聊聊VSCode中怎麼加入Emmet快捷鍵

青灯夜游
發布: 2022-09-08 20:31:33
轉載
2743 人瀏覽過

本篇文章帶大家了解一下VSCode中的Emmet工具,介紹一下VSCode中Emmet綁定熱鍵的方法,用以提升 HTML 編輯效率,希望對大家有幫助!

聊聊VSCode中怎麼加入Emmet快捷鍵

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中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板