[Front-End] Visual Studio Code - 단축키

Preferences > Keyboard Shortcut(바로 가기 키) 에서 단축키를 확인하거나 변경할 수 있습니다.

"를 사용하면 키 바인딩을 검색할 수 있습니다.
"를 닫으면 정확한 검색을 요구하므로 "cmd + p와 같이 "를 닫지 않고 검색하는 것을 추천합니다.

Windows 단축키macOS 단축키설명

“Ctrl + B”	“Cmd + B”	사이드바 열기/닫기
“Ctrl + P”	“Cmd + P”	빠른 열기(파일이나 기호 탐색)
“Ctrl + Shift + P”	“Cmd + Shift + P”	모든 명령 표시(에디터의 모든 명령에 접근)
“Ctrl + F”	“Cmd + F”	찾기(검색)
“Ctrl + H”	“Cmd + Opt(Alt) + F”	찾기(검색)/바꾸기(대체)
“Alt + Up”	“Alt + Up”	줄 위로 이동
“Alt + Down”	“Alt + Down”	줄 아래로 이동
“Shift + Alt + UpArrow”	“Shift + Alt + UpArrow”	위에 줄 복사
“Shift + Alt + DownArrow”	“Shift + Alt + DownArrow”	아래 줄 복사
“Tab”	“Tab”	들여쓰기
“Shift + Tab”	“Shift + Tab”	내어쓰기
“Ctrl + PageUp”	“Cmd + Shift + [”	이전 편집기 열기(좌측 창으로 전환)
“Ctrl + PageDown”	“Cmd + Shift + ]”	다음 편집기 열기(우측 창으로 전환)
“Ctrl + \”	“Cmd + \”	편집기 분할(백슬래쉬)
“Ctrl + 숫자”	“Cmd + 숫자”	숫자번째 분할된 편집기 그룹에 포커스
“Ctrl + W”	“Cmd + W”	편집기 닫기

약어로 랩핑(Wrap)

1. 랩핑할 코드 선택
2. 모든 명령 표시 실행 / “Ctrl + Shift + P”(Windows), “Cmd + Shift + P”(macOs)
3. Emmet: Wrap with Abbreviation(Emmet: 약어로 랩핑)를 입력하거나 목록에서 선택(“Enter”)
4. div, span 등의 Emmet 문법(ex: .wrapper, span.bold)을 입력
5. 완료(“Enter”)

 

Visual Studio Code에서 .을 붙힌 후 이름을 적으면 <div class="이름"></div>가 자동 완성 된다.