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

本篇文章帶大家了解一下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 + 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"   } ]

另外,如果你不想自己配置熱鍵,可以安裝 vscode 擴展,它是一組用于 VS Code 的 Emmet 鍵綁定。它可以用作預定義的鍵綁定組,以防您不知道映射到哪個鍵。

更多資料

還有許多有用的縮寫,例如 vscodevscode ,查閱它們以了解更多。

更多關于vscode的相關知識,請訪問:vscode

? 版權聲明
THE END
喜歡就支持一下吧
點贊15 分享