vscode_image

이번 포스트에서는 Windows/Linux와 macOS 환경에서 사용할 수 있는 VSCode 단축키를 효율적으로 정리했습니다. 표에서 운영체제별 단축키를 한눈에 비교할 수 있습니다.

 

1. 기본 편집 단축키

1.1 코드 이동 및 조작

기능 Windows/Linux macOS
라인 위로 이동 Alt+↑ Option+↑
라인 아래로 이동 Alt+↓ Option+↓
라인 복제(위/아래) Shift+Alt+↑/↓ Shift+Option+↑/↓
라인 삭제 커서 위치에서 Ctrl+X 커서 위치에서 Cmd+X

1.2 다중 커서 (가장 유용한 기능)

기능 Windows/Linux macOS
다중 커서 추가 Alt+클릭 Option+클릭
다음 동일 단어 선택 추가 Ctrl+D Cmd+D
동일 단어 모두 선택 Ctrl+Shift+L Cmd+Shift+L
열 선택 모드 Shift+Alt+드래그 Shift+Option+드래그
열 방향 커서 추가 Shift+Alt+I Shift+Option+I
위/아래에 커서 추가 Ctrl+Alt+↑/↓ Cmd+Option+↑/↓

1.3 주석 처리

기능 Windows/Linux macOS
라인 주석 Ctrl+/ Cmd+/
블록 주석 Shift+Alt+A Shift+Option+A

 

2. 탐색 및 검색 단축키

2.1 파일 탐색

기능 Windows/Linux macOS
파일 빠르게 열기 Ctrl+P Cmd+P
특정 라인으로 이동 Ctrl+G Cmd+G
심볼로 이동 Ctrl+Shift+O Cmd+Shift+O
모든 심볼 검색 Ctrl+T Cmd+T

2.2 검색 및 바꾸기

기능 Windows/Linux macOS
현재 파일에서 찾기 Ctrl+F Cmd+F
현재 파일에서 바꾸기 Ctrl+H Cmd+H 또는 Option+Cmd+F
전체 프로젝트에서 찾기 Ctrl+Shift+F Cmd+Shift+F
전체 프로젝트에서 바꾸기 Ctrl+Shift+H Cmd+Shift+H

 

3. 에디터 관리 단축키

3.1 분할 창과 탭 관리

기능 Windows/Linux macOS
에디터 분할 Ctrl+\ Cmd+\
첫/두/세 번째 편집기 그룹으로 이동 Ctrl+1/2/3 Cmd+1/2/3
다음 탭으로 이동 Ctrl+Tab Ctrl+Tab
이전 탭으로 이동 Ctrl+Shift+Tab Ctrl+Shift+Tab
탭 닫기 Ctrl+W Cmd+W
닫은 탭 다시 열기 Ctrl+Shift+T Cmd+Shift+T

 

4. 디버깅 단축키

4.1 디버깅 제어

기능 Windows/Linux macOS
디버깅 시작/계속 F5 F5
디버깅 중지 Shift+F5 Shift+F5
중단점 설정/해제 F9 F9
한 단계씩 실행(Step Over) F10 F10
함수 내부로 이동(Step Into) F11 F11
함수 밖으로 이동(Step Out) Shift+F11 Shift+F11

 

5. 터미널 및 패널 단축키

5.1 터미널 관리

기능 Windows/Linux macOS
통합 터미널 열기/닫기 Ctrl+` Ctrl+`
새 터미널 열기 Ctrl+Shift+` Cmd+Shift+`
출력 패널 토글 Ctrl+Shift+U Cmd+Shift+U
문제 패널 토글 Ctrl+Shift+M Cmd+Shift+M

 

6. 코드 접기/펼치기 단축키

6.1 코드 구조 관리

기능 Windows/Linux macOS
코드 접기 Ctrl+Shift+[ Cmd+Option+[
코드 펼치기 Ctrl+Shift+] Cmd+Option+]
모든 코드 접기 Ctrl+K Ctrl+0 Cmd+K Cmd+0
모든 코드 펼치기 Ctrl+K Ctrl+J Cmd+K Cmd+J

 

7. 다중 커서 활용 실전 사례

7.1 JSON 데이터 형식 변환

"name": "John"
"age": 30
"city": "New York"

작업 방법:

  1. 모든 라인 선택 후 각 줄 끝에 커서 추가: Shift+Alt+I(Win) / Shift+Option+I(Mac)
  2. 모든 커서 위치에 , 입력
  3. 첫 줄 시작 부분에 { 추가하고 마지막 줄 끝에 } 추가

7.2 HTML 태그에 클래스 추가

여러 <div> 태그에 동일한 클래스를 추가하려면:

  1. <div> 검색: Ctrl+F(Win) / Cmd+F(Mac)
  2. 모든 일치 항목 선택: Alt+Enter(Win) / Option+Enter(Mac)
  3. 각 태그에 class="container" 추가

7.3 변수 이름 일괄 변경

  1. 변경할 변수를 선택
  2. 같은 변수 모두 선택: Ctrl+D(Win) / Cmd+D(Mac) 반복
  3. 새 이름 입력하면 모든 변수가 동시에 변경됨

 

8. 유용한 VSCode 확장 프로그램

8.1 필수 확장 프로그램

개발 효율성을 높이는 필수 확장 프로그램:

  • Prettier: 코드 자동 포맷팅
  • GitLens: Git 히스토리 및 블레임 정보 확인
  • Auto Rename Tag: HTML/XML 태그 자동 변경
  • Live Server: HTML 파일 실시간 미리보기
  • Path Intellisense: 파일 경로 자동 완성
  • ESLint: JavaScript 코드 린팅
  • Bracket Pair Colorizer: 괄호 쌍 색상 구분

 

9. 정말 알아두면 좋은 추가 단축키

9.1 고급 단축키

기능 Windows/Linux macOS
명령 팔레트 열기 Ctrl+Shift+P Cmd+Shift+P
정의로 이동 F12 또는 Ctrl+클릭 F12 또는 Cmd+클릭
심볼 이름 변경 F2 F2
들여쓰기 늘리기/줄이기 Tab / Shift+Tab Tab / Shift+Tab
참조 찾기 Shift+F12 Shift+F12
파일 사이드바 토글 Ctrl+B Cmd+B

 

댓글 남기기