이 글에서는 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 구문
키 조합: 키보드 단축키 창을 열려면
Ctrl + K및Ctrl + S, 검색 상자에 Emmet을 입력하면 내장된 Emmet이 단축키를 바인딩할 수 있는 특정 작업을 찾을 수 있습니다.Ctrl + K和Ctrl + S打开键盘快捷键窗口，在搜索框输入 Emmet，可以找出内置 Emmet 可以绑定热键的特定操作。
按住 Ctrl + Shift + p 打开命令面板，输入 shortcut，找到打开键盘快捷键方式的选项。
将打开一个按键绑定的 keybindings.json 文件：
[]
每个添加的自定义快捷方式都反映在此文件中，并具有以下结构：
{
"key": "<key combination>",
"command": "<command to run>"
}
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 + *
Ctrl + Shift + p를 눌러 명령 패널을 열고 단축키를 입력한 다음 키보드 단축키를 켜는 옵션을 찾으세요.
키 바인딩 keybindings.json 파일이 열립니다: [
{
"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"
}
]
VS Code에서 사용할 수 있는 Emmet 명령
Emmet에서 사용할 수 있는 명령은 다음과 같습니다.[
{
"key": "alt+e alt+d",
"command": "editor.emmet.action.removeTag"
}
]
다음은 몇 가지 예입니다. alt + e 및 alt + * 조합을 사용합니다. 키 입력은 시스템 및 기타 소프트웨어와 충돌할 수 있습니다. 페어링된 태그로 이동 — 여는 요소 태그와 닫는 요소 태그 사이를 이동합니다. rrreee태그 제거
— HTML 트리에서 태그를 제거하지만 내부 HTML은 유지합니다.rrreee또한 단축키를 직접 구성하고 싶지 않다면 VS Code용 Emmet 키 바인딩 세트인 Emmet Keybindings
확장 프로그램을 설치할 수 있습니다. 매핑할 키를 모르는 경우 미리 정의된 키 바인딩 그룹으로 사용할 수 있습니다.
위 내용은 VSCode에 Emmet 단축키를 추가하는 방법에 대해 이야기해보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!