聊聊VSCode中怎麼加入Emmet快捷鍵
本篇文章帶大家了解一下VSCode中的Emmet工具,介紹一下VSCode中Emmet綁定熱鍵的方法,用以提升 HTML 編輯效率,希望對大家有幫助!
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" } ]
另外,如果你不想自己配置熱鍵,可以安裝 Emmet Keybindings 擴展,它是一組用於 VS Code 的 Emmet 鍵綁定。它可以用作預先定義的鍵綁定群組,以防您不知道要映射到哪個鍵。
更多資料
還有許多有用的縮寫,例如Wrap with Abbreviation 和Remove Tag ,查閱它們以了解更多。
更多關於VSCode的相關知識,請造訪:vscode教學!
以上是聊聊VSCode中怎麼加入Emmet快捷鍵的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用 Visual Studio Code 定義頭文件?創建頭文件並使用 .h 或 .hpp 後綴命名在頭文件中聲明符號(例如類、函數、變量)使用 #include 指令在源文件中包含頭文件編譯程序,頭文件將被包含並使聲明的符號可用

VS Code 系統要求:操作系統:Windows 10 及以上、macOS 10.12 及以上、Linux 發行版處理器:最低 1.6 GHz,推薦 2.0 GHz 及以上內存:最低 512 MB,推薦 4 GB 及以上存儲空間:最低 250 MB,推薦 1 GB 及以上其他要求:穩定網絡連接,Xorg/Wayland(Linux)

vscode 內置終端是一個開發工具,允許在編輯器內運行命令和腳本,以簡化開發流程。如何使用 vscode 終端:通過快捷鍵 (Ctrl/Cmd ) 打開終端。輸入命令或運行腳本。使用熱鍵 (如 Ctrl L 清除終端)。更改工作目錄 (如 cd 命令)。高級功能包括調試模式、代碼片段自動補全和交互式命令歷史。

在 Visual Studio Code(VSCode)中編寫代碼簡單易行,只需安裝 VSCode、創建項目、選擇語言、創建文件、編寫代碼、保存並運行即可。 VSCode 的優點包括跨平台、免費開源、強大功能、擴展豐富,以及輕量快速。

VS Code 終端常用命令包括:清除終端屏幕(clear)列出當前目錄文件(ls)更改當前工作目錄(cd)打印當前工作目錄路徑(pwd)創建新目錄(mkdir)刪除空目錄(rmdir)創建新文件(touch)刪除文件或目錄(rm)複製文件或目錄(cp)移動或重命名文件或目錄(mv)顯示文件內容(cat)查看文件內容並滾動(less)查看文件內容只能向下滾動(more)顯示文件前幾行(head)

VS Code 一步/下一步快捷鍵的使用方法:一步(向後):Windows/Linux:Ctrl ←;macOS:Cmd ←下一步(向前):Windows/Linux:Ctrl →;macOS:Cmd →

解決 Visual Studio Code 中中文註釋變為問號的方法:檢查文件編碼,確保為“UTF-8 without BOM”。更改字體為支持中文字符的字體,如“宋體”或“微軟雅黑”。重新安裝字體。啟用 Unicode 支持。升級 VSCode,重啟計算機,重新創建源文件。

VS Code 終端命令無法使用的原因及解決辦法:未安裝必要的工具(Windows:WSL;macOS:Xcode 命令行工具)路徑配置錯誤(添加可執行文件到 PATH 環境變量中)權限問題(以管理員身份運行 VS Code)防火牆或代理限制(檢查設置,解除限制)終端設置不正確(啟用使用外部終端)VS Code 安裝損壞(重新安裝或更新)終端配置不兼容(嘗試不同的終端類型或命令)特定環境變量缺失(設置必要的環境變量)
