Front-End
[Front-End] Visual Studio Code - 단축키
HappyWeasel
2019. 5. 25. 16:52
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)
- 랩핑할 코드 선택
- 모든 명령 표시 실행 / “Ctrl + Shift + P”(Windows), “Cmd + Shift + P”(macOs)
- Emmet: Wrap with Abbreviation(Emmet: 약어로 랩핑)를 입력하거나 목록에서 선택(“Enter”)
- div, span 등의 Emmet 문법(ex: .wrapper, span.bold)을 입력
- 완료(“Enter”)
Visual Studio Code에서 .을 붙힌 후 이름을 적으면 <div class="이름"></div>가 자동 완성 된다.