[단축키] VSCode(Visual Studio Code)

 

https://code.visualstudio.com/

https://demun.github.io/vscode-tutorial/shortcuts/

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

 

 

💡 단축키

1️⃣ 기본 편집

• `Ctrl + X` : 행 삭제 (빈 선택)
• `Ctrl + C` : 행 복사 (빈 선택)
• `Ctrl + Shift + K` : 행 삭제
• `Ctrl + Enter` : 아래에 행 삽입
• `Ctrl + Shift + Enter` : 위에 행 삽입
• `Alt + (↑,↓)` : 행 이동
• `Shift + Alt + (↑,↓)` : 행 복제
• `Ctrl + D` : 다음 선택 찾기
• `Ctrl + F2`, `Ctrl + Shift + L` : 현재 단어의 모든 항목 선택
• `Ctrl + K Ctrl + D` : 마지막 선택 항목을 다음 찾기 항목으로 이동
• `Ctrl + U` : 마지막 커서 작업 실행 취소
• `Shift + Alt + I` : 선택한 각 줄 끝의 커서 삽입
• `Ctrl + Alt + Down` : 커서를 아래에 추가
• `Ctrl + Alt + Up` : 커서를 위에 추가
• `Ctrl + Shift + \` : 일치하는 대괄호로 건너 뛰기
• `Alt + Click` : 멀티 커서 추가
• `Ctrl + Alt + (↑,↓)` : 세로로 긴 커서 생성
• `Shift + Alt + 드래그` : 자유 영역 지정
• `드래그 + ( )` : 선택한 영역을 괄호로 묶기
• `Ctrl + ([,])` : 라인 내어쓰기/들여쓰기
• `Ctrl + (↑,↓)` : 코드 스크롤
• `Alt + Page Down` : 아래로 페이지 스크롤
• `Alt + Page Up` : 페이지 위로 스크롤
• `Ctrl + Shift + ([,])` : 영역 접기/펼치기
• `Ctrl + K Ctrl + ([,])` : 현재 영역 접기/펼치기
• `Ctrl + K Ctrl + 0` : 모든 영역 접기
• `Ctrl + K Ctrl + J` : 모든 영역 펼치기
• `Ctrl + K Ctrl + C` : 행 주석 추가
• `Ctrl + K Ctrl + U` : 행 주석 제거
• `Ctrl + /` : 커서가 위치한 행 주석 토글
• `Shift + Alt + A` : 커서 위치에 주석 토글
• `Alt + Z` : 단어 감싸기(현재 편집 중인 파일의 긴 텍스트 자동 줄바꿈) 토글

2️⃣ 언어 편집

• `Ctrl + Space` : 트리거 제안
• `Ctrl + Shift + Space` : 트리거 매개 변수 힌트
• `Shift + Alt + F` : 문서 서식 지정(전체 코드 정렬)
• `Ctrl + K Ctrl + F` : 형식 선택(선택한 코드 블록에 대한 정렬)
• `F2` : 심볼(변수, 함수, 클래스 등) 이름 일괄 변경
• `F12` : 정의로 이동
• `Shift + F12` : 참조 표시
• `Ctrl + K Ctrl + I` : 호버 표시
• `Alt + F12` : 키워드 정의
• `Ctrl + K F12` : 키워드 정의 우측에 열기
• `Ctrl + .` : 빠른 수정
• `Shift + Alt + (→,←)` : 선택 확장/축소
• `Ctrl + K Ctrl + X` : 각 줄의 끝에 있는 공백(예: 탭이나 스페이스) 제거
• `Ctrl + K M` : 언어 모드 변경

3️⃣ 네비게이션

• `Ctrl + T` : 모든 기호 표시
• `Ctrl + G` : 행으로 이동
• `Ctrl + P` : 빠른 열기, 파일로 이동
• `Ctrl + Shift + O` : 기호로 이동
• `Ctrl + Shift + M` : 오류 보기
• `F8` : 다음 오류 또는 경고로 이동
• `Shift + F8` : 이전 오류 또는 경고로 이동
• `Ctrl + Shift + P` : 모든 명령 표시
• `Alt + (→,←)` : 전에 돌아간 작업의 다음 위치로 이동 /이전 작업으로 이동

4️⃣ 에디터/윈도우 관리

• `Ctrl + Shift + N` : 새창 열기
• `Ctrl + W` : 창 닫기
• `Ctrl + F4` : 편집기 닫기
• `Ctrl + \` : 편집기 나누기
• `Ctrl + 1` : 첫번째 에디터 그룹에 초점 맞추기
• `Ctrl + Shift + Page Up/ Down` : 왼쪽/오른쪽으로 편집기 이동
• `Ctrl + Alt + (→,←)` : 에디터를 다음/이전 그룹으로 이동
• `Ctrl + K (→,←)` : 에디터 그룹을 오른쪽/왼쪽으로 이동
• `Ctrl + K Ctrl + (→,←)` : 오른쪽/왼쪽 에디터 그룹에 초점 맞추기
• `Ctrl + K Ctrl + M`: 에디터 그룹 확장/축소

5️⃣ 파일 관리

• `Ctrl + N` : 새탭 열기
• `Ctrl + O` : 파일 열기
• `Ctrl + S` : 저장
• `Ctrl + K S` : 모두 저장
• `Ctrl + Shift + S` : 다른 이름으로 저장
• `Ctrl + W`, `Ctrl + F4` : 닫기
• `Ctrl + K W` : 그룹 닫기
• `Ctrl + K Ctrl + W` : 모두 닫기
• `Ctrl + Shift + T` : 닫힌 편집기 다시 열기
• `Ctrl + K Enter` : 계속 열기
• `Ctrl + Tab` : 현재 에디터 그룹 내에서 열린 탭을 순서대로 앞으로 이동 
• `Ctrl + Shift + Tab` : 현재 에디터 그룹 내에서 열린 탭을 순서대로 뒤로 이동
• `Ctrl + K P` : 활성 파일의 경로 복사
• `Ctrl + K O` : 현재 파일 새 창에 열기
• `Ctrl + K R` : 현재 파일 탐색기로 열기

6️⃣ 디스플레이

• `F11` : 전체 화면 토글
• `Ctrl + K Z` : 젠 모드 토글
• `Esc + Esc` : 젠 모드에서 나가기
• `Ctrl + =` : 편집기 텍스트 확대
• `Ctrl + -` : 편집기 텍스트 축소
• `Ctrl + Numpad 0` : 편집기 확대 비율 초기화
• `Ctrl + B` : 사이드바 토글
• `Ctrl + Shift + E` : 탐색기 표시 / 포커스 전환
• `Ctrl + Shift + F` : 검색 보기
• `Ctrl + Shift + G` : 소스 제어 표시
• `Ctrl + Shift + D` : 디버그 표시
• `Ctrl + Shift + X` : 확장 표시
• `Ctrl + Shift + U` : 출력 보기
• `Ctrl + Q` : 명령창에서 빠른 열기
• `Ctrl + Shift + C` : 새 프롬프트 열기
• `Ctrl + Shift + V` : 마크다운 미리보기 토글
• `Ctrl + K V` : 마크다운 측면에 미리보기
• `Ctrl + (백틱)` : 통합 터미널 토글

7️⃣ 검색

• `Ctrl + F` : 찾기
• `Ctrl + H` : 바꾸기
• `F3` : 다음 찾기
• `Shift + F3` : 이전 찾기
• `Alt + Enter` : 모든 일치 항목 선택
• `Ctrl + M` : 포커스 설정을 위해 Tab 키 사용 토글
• `Ctrl + Shift + F` : 검색 보기
• `Ctrl + Shift + H` : 파일에서 바꾸기
• `Alt + C` : 대 / 소문자 전환
• `Alt + W` : 전체 단어 맞추기 토글
• `Alt + R` : 정규 표현식 사용 토글
• `Ctrl + Shift + J` : 검색 세부 사항 전환
• `F4` : 검색 바꾸기 열기
• `Shift + F4` : 이전 검색 바꾸기 검색 결과
• `Alt + Down` : 다음 검색 용어 표시
• `Alt + Up` : 이전 검색 용어 표시

8️⃣ 환경 설정

• `Ctrl + ,` : 사용자 설정 열기
• `Ctrl + K Ctrl + S` : 키보드 단축키 열기
• `Ctrl + K Ctrl + T` : 색상 테마 선택

9️⃣ 디버그

• `F9` : 중단점 토글
• `F5` : 디버그 시작
• `F5` : 디버그 확인
• `Ctrl + F5` : 시작 (디버깅하지 않음)
• `F6` : 중지
• `F11` : 들어가기
• `Shift + F11` : 스텝 아웃
• `F10` : 스텝 오버
• `Shift + F5` : 중지

 

 

💡 Emmet 확장 기능

Emmet은 HTML/CSS 코드를 간단한 줄임말로 입력해 빠르게 작성할 수 있는 도구입니다. (VSCode에 기본 포함)

✔️ HTML 템플릿 예시

• HTML 기본 구조 : `!` + `Tab`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

✔️ HTML 확장 예시

• 기본적인 HTML 태그
  • div + `Tab` → `<div></div>`
• 클래스와 ID 추가
  • div.container + `Tab` → `<div class="container"></div>`
  • div#header + `Tab` → `<div id="header"></div>`
• 태그 중첩과 구조 생성
  • ul>li*3 + `Tab` → `<ul> <li></li> <li></li> <li></li> </ul>`
  • div.wrap>p.a+p.b + `Tab` → `<div class="wrap"> <p class="a"></p> <p class="b"></p> </div>`
  • table>tr*1>td*2 + `Tab` → `<table> <tr> <td></td> <td></td> </tr> </table>`
• 속성 추가
  • a[href="https://example.com"] + `Tab` → `<a href="https://example.com"></a>`

✔️ CSS 확장 예시

• CSS 속성 단축
  • m10 + `Tab` → `margin: 10px;`
  • p10-20 + `Tab` → `padding: 10px 20px;`
  • w100 + `Tab` → `width: 100px;`
  • bgc + `Tab` → `background-color: ;`
• CSS Flexbox
  • d:f + `Tab` → `display: flex;`
  • ai:c + `Tab` → `align-items: center;`
  • jc:sb + `Tab` → `justify-content: space-between;`

✔️ Emmet 활용 팁

1. 중첩 구조 작성 : Emmet은 `>`, `+`, `*` 기호로 부모-자식, 형제 관계, 반복을 간단히 표현합니다.
2. 자동 번호 매기기 : Emmet은 `$` 기호를 사용해 자동으로 번호를 매길 수 있습니다.
   • ul>li.item$*2 + `Tab` → ` <ul> <li class="item1"></li> <li class="item2"></li> </ul> `
3. 태그 내용 미리 채우기 : `{}`를 사용해 태그 내용을 미리 채울 수 있습니다.
   • p{Hello} + `Tab` → `<p>Hello</p>`