개발 효율성을 높여주는 VS Code 단축키 총정리

EKONov 13, 2024

키보드는 마우스보다 빠르다

VS Code에서 단축키를 잘 활용하면 마우스로 클릭하는 것보다 더 빠르게 코드를 작성하고 수정할 수 있습니다. VS Code를 잘 다루는 개발자들은 단축키로 창을 열고 닫고, 코드를 효율적으로 작성하고, 다중 커서로 한 번에 여러 줄을 수정하고, 원하는 파일과 줄로 신속하게 이동합니다. 이렇게 단축키를 잘 활용하면 같은 코드를 더 빠르게 작성할 수 있습니다.

하지만 처음엔 방대한 단축키를 어디서부터 어떻게 익혀야 할지 막막할 수 있습니다. VS Code 홈페이지에서 제공하는 단축키 목록 PDF 자료 (macOS / Windows)도 있지만, 이걸 무작정 다 외우는 것은 너무 비효율적입니다. 그래서 이번 글에서는 제가 실제로 자주 사용하고, 작업에 정말 도움이 되는 단축키들을 선별해보았습니다. 비슷한 역할끼리 묶어서 기억할 수 있도록 창 관리, 기본 편집, 다중 커서, 탐색이라는 네 가지 카테고리로 나누어 정리했습니다. 여러분도 단축키를 익혀서 개발 생산성을 한 단계 높여보세요!

General: 창 열고 닫기

macOS	Windows	설명
`⌘` + `⇧` + `P`	`Ctrl` + `Shift` + `P`	명령 팔레트 열기
`⌘` + `P`	`Ctrl` + `P`	파일명 검색하여 열기
`⌘` + `,`	`Ctrl` + `,`	설정 열기
`⌃` + `	`Ctrl` + `	터미널 토글
`⌘` + `B`	`Ctrl` + `B`	사이드바 토글
`⌘` + `W`	`Ctrl` + `W`	탭 닫기
`⌘` + `⇧` + `T`	`Ctrl` + `Shift` +`T`	닫은 탭 다시 열기
`⌘` + `\`	`Ctrl` + `\`	스플릿 (에디터, 터미널 모두 가능)

Basic Editing: 기본 편집 기능

macOS	Windows	설명
`⌘` + `↑`/`↓`	`Ctrl` + `Home`/`End`	파일의 맨 위/아래로 커서 이동
`⌘` + `←`/`→`	`Home`/`End`	라인의 맨 앞/뒤로 커서 이동 (Shift 같이 누르면 선택)
`⌥` + `←`/`→`	`Ctrl` + `←`/`→`	단어 단위로 커서 이동 (Shift 같이 누르면 선택)
`⌥` + `↑`/`↓`	`Alt` + `↑`/`↓`	코드를 위/아래로 이동 (여러 줄도 가능)
`⌥` + `⇧` + `↑`/`↓`	`Alt` + `Shift` + `↑`/`↓`	코드를 위/아래로 복제 (여러 줄도 가능)
`⌘` + `Enter`	`Ctrl` + `Enter`	아래에 빈 줄 삽입 (커서가 중간에 있어도 가능)
`⌘` + `/`	`Ctrl` + `/`	주석 (사용하는 언어에 맞게 주석 처리)
`⌘` + `X`	`Ctrl` + `X`	잘라내기 (한 줄 삭제할 때 편리)
`⌘` + `L`	`Ctrl` + `L`	한 줄 선택 (연타하면 여러 줄 선택)

Multi-Cursor: 다중 커서로 여러 줄 수정하기

macOS	Windows	설명
`⌘` + `D`	`Ctrl` + `D`	동일 단어 연속 선택 (`⌘`/`Ctrl` + `K` 누르면 제외)
`⌘` + `⇧` + `L`	`Ctrl` + `Shift` + `L`	동일 단어 전체 선택
`⌥` + click	`Alt` + click	클릭하는 곳마다 커서 생성
`⌥` + `⇧` + drag	`Alt` + `Shift` + drag	드래그하는 곳마다 커서 생성
`⌥` + `⇧` + `I`	`Alt` + `Shift` + `I`	선택한 모든 줄 끝에 커서 생성
`⌘` + `⌥` + `↑`/`↓`	`Ctrl` + `Alt` + `↑`/`↓`	커서 위/아래로 다중 커서 생성

macOS	Windows	설명
`⌃` + `Tab`	`Ctrl` + `Tab`	이전 탭으로 이동
`⌃` + `G`	`Ctrl` + `G`	특정 라인으로 이동
`⌃` + `-` / `⌃` + `⇧` + `-`	`Alt` + `←`/`→`	이전/다음 커서 위치로 이동 (커서 히스토리)
`⌘` + `1`/`2`	`Ctrl` + `1`/`2`	스플릿창 포커스 이동

Rich Languages Editing: 언어 기반의 심화 기능

VS Code는 언어의 문법, 타입 시스템, 구조 등을 이해하고 이를 바탕으로 다양한 기능을 제공합니다. 예를 들어, 변수, 함수, 클래스, 컴포넌트 등을 인식하고 코드의 맥락에 맞는 작업을 지원합니다. 이런 심화 기능들은 단순히 단축키를 외우는 것보다 기능 자체를 이해하는 것이 더 중요합니다. 아래 소개해드릴 기능들은 마우스 우클릭 시 나오는 메뉴 안에도 있으니, 꼭 단축키를 쓰지 않더라도 기능을 사용하면서 익혀보세요.

macOS	Windows	설명
`F12` or `⌘` + click	`F12` or `Ctrl` + click	정의로 이동 (함수 등이 정의된 부분으로 이동)
`⇧` + `F12`	`⇧` + `F12`	모든 참조 보기 (함수 등이 사용된 부분을 모두 찾아줌)
`F2`	`F2`	이름 일괄 변경 (다른 파일에 참조된 것까지 전부 변경)
`⌘` + `.`	`Ctrl` + `.`	리팩터링, 퀵 픽스 (변수/함수 추출, 파일 이동 등)

특히 리팩터링 기능은 코드의 구조를 변경해주는 다양한 옵션을 제공합니다. 변수, 함수 등을 추출하거나, 함수의 형태를 변환하거나, 코드를 다른 파일로 이동하는 등 번거로운 작업을 자동으로 처리해줍니다. 그리고 퀵 픽스는 누락된 import 문을 자동으로 추가해주는 기능도 있습니다. 수정할 부분에 커서를 놓거나 선택하면 왼쪽에 💡 전구 모양 아이콘이 나타나는데, 이 아이콘을 클릭하거나 ⌘/Ctrl + . 단축키를 누르면 사용 가능한 옵션을 확인할 수 있습니다.