VS Code 완벽 가이드
VS Code 소개 및 필수 확장 프로그램
🔥 VS Code 생산성 500% 폭발 단축키 총정리
개발자라면 숨쉬듯 자연스럽게 써야 할 VS Code 핵심 단축키 모음입니다.
1. 빠른 탐색 및 이동 (Navigation)
빠른 파일 열기 (Quick Open)
프로젝트 내의 파일을 이름으로 즉시 찾습니다.
Ctrl + P
명령 팔레트 (Command Palette)
VS Code의 모든 명령어와 기능을 검색하고 실행합니다.
Ctrl + Shift + P
심볼 탐색 (Go to Symbol)
현재 파일 내의 함수, 변수, 클래스 등으로 점프합니다.
Ctrl + Shift + O
정의로 이동 (Go to Definition)
함수나 변수가 선언된 원본 위치로 이동합니다.
F12
2. 코드 편집 마스터 (Editing)
다중 커서 (Multi-Cursor)
같은 단어를 한 번에 여러 개 선택하여 동시에 수정합니다.
Ctrl + D
코드 줄 위/아래 이동
현재 줄을 그대로 위아래로 이동시킵니다.
Alt + ↑/↓
코드 줄 복사
현재 줄을 아래나 위로 즉시 복제합니다.
Shift + Alt + ↑/↓
선택 영역 스마트 확장
괄호나 스코프 단위로 선택 영역을 똑똑하게 넓혀갑니다.
Shift + Alt + →
변수명 일괄 변경 (Rename)
변수/함수 이름을 프로젝트 전체에서 안전하게 변경합니다.
F2
3. 화면 및 UI 제어 (UI & Panels)
사이드바 숨기기/보이기
파일 탐색기(사이드바)를 열거나 닫아 화면을 넓게 씁니다.
Ctrl + B
터미널 열기/닫기
내장 터미널 패널을 토글합니다.
Ctrl + ` (백틱)
에디터 세로 분할
화면을 반으로 나누어 두 파일을 동시에 봅니다.
Ctrl + \\
현재 탭 닫기
열려있는 현재 파일을 닫습니다.
Ctrl + W
4. 포맷팅 및 주석 (Formatting & Comments)
한 줄 주석 토글
현재 줄이나 선택 영역을 주석 처리/해제합니다.
Ctrl + /
블록 주석 토글
선택한 영역을 블록 주석(/* */)으로 처리합니다.
Shift + Alt + A
코드 자동 정렬 (Format)
들여쓰기와 포맷을 깔끔하게 자동 정리합니다.
Shift + Alt + F
기본 환경 설정 완벽 가이드 (settings.json)
VS Code의 모든 화면 표시, 동작 방식 설정은 settings.json이라는 단 하나의 파일에 코드로 저장됩니다. 복잡한 체크박스를 찾을 필요 없이 이 코드 파일 하나만 복사해서 다른 컴퓨터에 붙여넣으면 단 1초 만에 나와 완벽히 똑같은 개발 환경이 복제됩니다.
👉 Ctrl + , (맥은 Cmd + ,) 키를 눌러 설정 창을 열고, 우측 상단의 (파일 꺾쇠) 아이콘을 누르면 JSON 파일로 직접 설정을 편집할 수 있습니다.
settings.json
JSON
{
// 파일을 저장할 때마다 자동으로 Prettier를 실행하여 코드 포맷팅
"editor.formatOnSave": true,
// 기본 포맷터로 Prettier 지정
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 코드 줄이 길어지면 화면 크기에 맞게 밑으로 자동 줄바꿈 처리
"editor.wordWrap": "on",
// 들여쓰기 공간을 탭(Tab)이 아닌 2칸의 스페이스 공백으로 고정
"editor.tabSize": 2,
// 오른쪽 공간을 낭비하는 미니맵 숨기기
"editor.minimap.enabled": false,
// 코딩용 가독성 좋은 폰트 설정 (Ligature 지원 폰트 권장)
"editor.fontFamily": "'D2Coding', 'Consolas', monospace"
}Emmet(에밋) 마법 같은 타이핑
Emmet(에밋)은 HTML과 CSS를 작성할 때 마법 같은 축약어를 사용하여 타이핑 속도를 10배 이상 폭발적으로 향상시켜 주는 강력한 도구입니다. VS Code에는 이 기능이 아예 기본으로 내장되어 있습니다. 복잡하게 중첩된 태그 구조도 단 한 줄의 축약어로 순식간에 생성할 수 있습니다.
⚡ 업무 시간을 반으로 줄이는 Emmet 치트시트
!
HTML5의 기본 문서 뼈대(head, body 등)를 단숨에 1초 만에 자동 생성합니다.
.box
가장 흔하게 쓰는
<div class="box"></div> 코드를 바로 만들어 줍니다.ul>li*5
ul 부모 태그 안에 자식인 li 태그를 한 번에 5개 연속으로 생성합니다.a[href="#"]{클릭}
속성과 내부 텍스트가 모두 채워진
<a href="#">클릭</a> 링크를 완성합니다.💡 중요: 축약어를 입력한 뒤 마우스로 클릭하지 말고, 항상 키보드의 Tab 키나 Enter 키를 누르세요!
생산성을 200% 올리는 필수 단축키
🔥 VS Code 생산성 500% 폭발 단축키 총정리
개발자라면 숨쉬듯 자연스럽게 써야 할 VS Code 핵심 단축키 모음입니다.
1. 빠른 탐색 및 이동 (Navigation)
빠른 파일 열기 (Quick Open)
프로젝트 내의 파일을 이름으로 즉시 찾습니다.
Ctrl + P
명령 팔레트 (Command Palette)
VS Code의 모든 명령어와 기능을 검색하고 실행합니다.
Ctrl + Shift + P
심볼 탐색 (Go to Symbol)
현재 파일 내의 함수, 변수, 클래스 등으로 점프합니다.
Ctrl + Shift + O
정의로 이동 (Go to Definition)
함수나 변수가 선언된 원본 위치로 이동합니다.
F12
2. 코드 편집 마스터 (Editing)
다중 커서 (Multi-Cursor)
같은 단어를 한 번에 여러 개 선택하여 동시에 수정합니다.
Ctrl + D
코드 줄 위/아래 이동
현재 줄을 그대로 위아래로 이동시킵니다.
Alt + ↑/↓
코드 줄 복사
현재 줄을 아래나 위로 즉시 복제합니다.
Shift + Alt + ↑/↓
선택 영역 스마트 확장
괄호나 스코프 단위로 선택 영역을 똑똑하게 넓혀갑니다.
Shift + Alt + →
변수명 일괄 변경 (Rename)
변수/함수 이름을 프로젝트 전체에서 안전하게 변경합니다.
F2
3. 화면 및 UI 제어 (UI & Panels)
사이드바 숨기기/보이기
파일 탐색기(사이드바)를 열거나 닫아 화면을 넓게 씁니다.
Ctrl + B
터미널 열기/닫기
내장 터미널 패널을 토글합니다.
Ctrl + ` (백틱)
에디터 세로 분할
화면을 반으로 나누어 두 파일을 동시에 봅니다.
Ctrl + \\
현재 탭 닫기
열려있는 현재 파일을 닫습니다.
Ctrl + W
4. 포맷팅 및 주석 (Formatting & Comments)
한 줄 주석 토글
현재 줄이나 선택 영역을 주석 처리/해제합니다.
Ctrl + /
블록 주석 토글
선택한 영역을 블록 주석(/* */)으로 처리합니다.
Shift + Alt + A
코드 자동 정렬 (Format)
들여쓰기와 포맷을 깔끔하게 자동 정리합니다.
Shift + Alt + F
통합 터미널 및 버전 관리 (Git)
VS Code는 단순히 코드를 치는 메모장이 아니라 터미널과 형상 관리(Git) 도구를 완벽하게 내장하고 있는 만능 스튜디오입니다. 개발 시 창을 여러 개 띄우지 않고 VS Code 안에서 모든 것을 해결할 수 있습니다.
🖥️ 통합 터미널 (Integrated Terminal)
Ctrl + ` (백틱) 키를 누르면 화면 하단에 검은색 명령 프롬프트 창이 나타납니다. npm 패키지 설치, 서버 구동, 배포 명령어 등 모든 작업을 이곳에서 처리합니다. 우측의 + 버튼을 누르면 탭처럼 여러 개의 터미널을 동시에 띄워두고(예: 하나는 서버용, 하나는 Git용) 병렬로 작업할 수도 있습니다.
🌳 시각화된 Git 소스 제어 (Source Control)
좌측 사이드바의 세 번째 아이콘(나뭇가지 모양)을 클릭하면 변경된 파일 목록이 직관적으로 보입니다. 굳이 검은 터미널 창에 git add, git commit 명령어를 어렵게 치지 않아도, + 버튼과 커밋 메시지 입력칸만으로 누구나 쉽게 GitHub 연동 작업을 할 수 있습니다.
💡 실무 꿀팁: GitLens 익스텐션
GitLens를 설치하면 코드를 누를 때마다 해당 줄을 "누가, 언제, 어떤 이유로" 수정했는지 회색 투명한 글씨로 바로 옆에 띄워줍니다. 현업 팀 프로젝트 시 범인을 색출(?)하고 히스토리를 파악하는 절대 무기입니다.
GitLens를 설치하면 코드를 누를 때마다 해당 줄을 "누가, 언제, 어떤 이유로" 수정했는지 회색 투명한 글씨로 바로 옆에 띄워줍니다. 현업 팀 프로젝트 시 범인을 색출(?)하고 히스토리를 파악하는 절대 무기입니다.