목차
VS Code 단축키 추가
VS Code 中可用的 Emmet 命令
Smooth In/Smooth Out — 현재 캐럿 위치에서 레이블 또는 레이블의 콘텐츠 경계를 검색하여 선택합니다. rrreee
개발 도구 VSCode VSCode에 Emmet 단축키를 추가하는 방법에 대해 이야기해보겠습니다.

VSCode에 Emmet 단축키를 추가하는 방법에 대해 이야기해보겠습니다.

Sep 05, 2022 pm 07:35 PM
vscode emmet

이 글에서는 VSCode의 Emmet 도구에 대해 소개하고, HTML 편집 효율성을 높이기 위해 VSCode에서 Emmet 단축키를 바인딩하는 방법을 소개합니다. 모든 분들께 도움이 되길 바랍니다!

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 + KCtrl + S , 검색 상자에 Emmet을 입력하면 내장된 Emmet이 단축키를 바인딩할 수 있는 특정 작업을 찾을 수 있습니다. Ctrl + KCtrl + 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 + ealt + *

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

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

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

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

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

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

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vscode에서 word 문서 보는 방법 vscode에서 word 문서 보는 방법 vscode에서 word 문서 보는 방법 vscode에서 word 문서 보는 방법 May 09, 2024 am 09:37 AM

vscode에서 word 문서 보는 방법 vscode에서 word 문서 보는 방법

vscode로 순서도 그리는 방법 Visual_studio 코드로 순서도 그리는 방법 vscode로 순서도 그리는 방법 Visual_studio 코드로 순서도 그리는 방법 Apr 23, 2024 pm 02:13 PM

vscode로 순서도 그리는 방법 Visual_studio 코드로 순서도 그리는 방법

Vscode에서 Maude를 작성하는 방법_Vscode에서 Maude를 작성하는 방법 Vscode에서 Maude를 작성하는 방법_Vscode에서 Maude를 작성하는 방법 Apr 23, 2024 am 10:25 AM

Vscode에서 Maude를 작성하는 방법_Vscode에서 Maude를 작성하는 방법

Caltech Chinese는 AI를 사용하여 수학적 증명을 뒤집습니다! 충격적인 Tao Zhexuan의 속도 5배 향상, 수학 단계의 80%가 완전 자동화됨 Caltech Chinese는 AI를 사용하여 수학적 증명을 뒤집습니다! 충격적인 Tao Zhexuan의 속도 5배 향상, 수학 단계의 80%가 완전 자동화됨 Apr 23, 2024 pm 03:01 PM

Caltech Chinese는 AI를 사용하여 수학적 증명을 뒤집습니다! 충격적인 Tao Zhexuan의 속도 5배 향상, 수학 단계의 80%가 완전 자동화됨

vscode에서 백그라운드 업데이트를 활성화하는 방법 vscode에서 백그라운드 업데이트를 활성화하는 방법 vscode에서 백그라운드 업데이트를 활성화하는 방법 vscode에서 백그라운드 업데이트를 활성화하는 방법 May 09, 2024 am 09:52 AM

vscode에서 백그라운드 업데이트를 활성화하는 방법 vscode에서 백그라운드 업데이트를 활성화하는 방법

vscode 작업 공간에 파일을 추가하는 방법 vscode 작업 공간에 파일을 추가하는 방법 vscode 작업 공간에 파일을 추가하는 방법 vscode 작업 공간에 파일을 추가하는 방법 May 09, 2024 am 09:43 AM

vscode 작업 공간에 파일을 추가하는 방법 vscode 작업 공간에 파일을 추가하는 방법

vscode에서 wsl 구성 파일을 비활성화하는 방법 vscode에서 wsl 구성 파일을 비활성화하는 방법 vscode에서 wsl 구성 파일을 비활성화하는 방법 vscode에서 wsl 구성 파일을 비활성화하는 방법 May 09, 2024 am 10:30 AM

vscode에서 wsl 구성 파일을 비활성화하는 방법 vscode에서 wsl 구성 파일을 비활성화하는 방법

VScode에서 애니메이션 부드러운 삽입을 설정하는 방법 VScode 튜토리얼에서 애니메이션 부드러운 삽입을 설정하는 방법 VScode에서 애니메이션 부드러운 삽입을 설정하는 방법 VScode 튜토리얼에서 애니메이션 부드러운 삽입을 설정하는 방법 May 09, 2024 am 09:49 AM

VScode에서 애니메이션 부드러운 삽입을 설정하는 방법 VScode 튜토리얼에서 애니메이션 부드러운 삽입을 설정하는 방법

See all articles