VSCode에 Emmet 단축키를 추가하는 방법에 대해 이야기해보겠습니다.
Sep 05, 2022 pm 07:35 PM이 글에서는 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
확장 프로그램을 설치할 수 있습니다. 매핑할 키를 모르는 경우 미리 정의된 키 바인딩 그룹으로 사용할 수 있습니다.
위 내용은 VSCode에 Emmet 단축키를 추가하는 방법에 대해 이야기해보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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

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

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

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