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 + 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 + *

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 + * 조합을 사용합니다. 키 입력은 시스템 및 기타 소프트웨어와 충돌할 수 있습니다.

Smooth In/Smooth Out — 현재 캐럿 위치에서 레이블 또는 레이블의 콘텐츠 경계를 검색하여 선택합니다. rrreee

페어링된 태그로 이동 — 여는 요소 태그와 닫는 요소 태그 사이를 이동합니다. rrreee태그 제거

— HTML 트리에서 태그를 제거하지만 내부 HTML은 유지합니다.

rrreee또한 단축키를 직접 구성하고 싶지 않다면 VS Code용 Emmet 키 바인딩 세트인 Emmet Keybindings
확장 프로그램을 설치할 수 있습니다. 매핑할 키를 모르는 경우 미리 정의된 키 바인딩 그룹으로 사용할 수 있습니다.

🎜🎜추가 정보🎜🎜🎜 🎜Wrap with Abbreviation🎜 및 🎜Remove Tag🎜과 같은 유용한 약어도 많이 있습니다. 자세히 알아보려면 해당 약어를 확인하세요. 🎜🎜VSCode에 대한 자세한 내용을 보려면 🎜vscode 튜토리얼🎜을 방문하세요! 🎜🎜

위 내용은 VSCode에 Emmet 단축키를 추가하는 방법에 대해 이야기해보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!