本篇文章帶大家了解一下VSCode中的Emmet工具，介紹一下VSCode中Emmet綁定熱鍵的方法，用以提升 HTML 編輯效率，希望對大家有幫助！
Emmet 是一個自動將程式碼片段擴充為 HTML 的工具。它包含在 VS Code 中。 【推薦學習：《vscode入門教學》】
例如以下片段：
將展開為：
1 2 3 4 5 6 7 | <div class="someClass">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
|
登入後複製
Emmet 也提供了其他一些快捷方式提升HTML 開發效率。
推薦：Emmet 語法
#新增VS Code 捷徑
組合鍵：Ctrl K 和Ctrl S 開啟鍵盤快速鍵窗口，在搜尋框輸入Emmet，可以找出內建Emmet 可以綁定熱鍵的特定動作。
按住 Ctrl Shift p 開啟指令面板，輸入 shortcut，找到開啟鍵盤快速鍵方式的選項。
將開啟一個按鍵綁定的keybindings.json 檔案：
每個新增的自訂捷徑都反映在此檔案中，並具有以下結構：
1 2 3 4 | {
"key": "<key combination>",
"command": "<command to run>"
}
|
登入後複製
VS Code 中可用的Emmet 命令
Emmet 的可用命令如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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 * 組合，按鍵可能會因為系統和其他軟體衝突，調整到自己舒服即可。
平滑向內/平滑向外 — 從目前插入符號位置搜尋標籤或標籤的內容邊界並選擇它。
1 2 3 4 5 6 7 8 9 10 | [
{
"key": "alt+e alt+i",
"command": "editor.emmet.action.balanceIn"
},
{
"key": "alt+e alt+o",
"command": "editor.emmet.action.balanceOut"
}
]
|
登入後複製
前往配對標籤 — 在開始和結束元素標籤之間跳轉。
1 2 3 4 5 6 | [
{
"key": "alt+e alt+e",
"command": "editor.emmet.action.matchTag"
}
]
|
登入後複製
刪除標籤 — 從 HTML 樹中刪除標籤但保留其內部 HTML。
1 2 3 4 5 6 | [
{
"key": "alt+e alt+d",
"command": "editor.emmet.action.removeTag"
}
]
|
登入後複製
另外，如果你不想自己配置熱鍵，可以安裝 Emmet Keybindings 擴展，它是一組用於 VS Code 的 Emmet 鍵綁定。它可以用作預先定義的鍵綁定群組，以防您不知道要映射到哪個鍵。
更多資料
還有許多有用的縮寫，例如Wrap with Abbreviation 和Remove Tag ，查閱它們以了解更多。
更多關於VSCode的相關知識，請造訪：vscode教學！
以上是聊聊VSCode中怎麼加入Emmet快捷鍵的詳細內容。更多資訊請關注PHP中文網其他相關文章！
