VS Code 완벽 가이드
Visual Studio Code(VS Code)는 전 세계에서 가장 많이 사용되는 압도적인 1위 코드 에디터입니다. 마이크로소프트에서 개발한 이 에디터의 가장 큰 장점은 전 세계 개발자들이 만들어 올린 수만 개의 확장 프로그램(Extensions)을 레고 블록처럼 조립해 나만의 완벽한 개발 환경을 구축할 수 있다는 점입니다.
프론트엔드 필수 확장 프로그램 (Extensions)
<div>를 <section>으로 변경할 때, 닫는 태그 </div>도 동시에 똑같이 자동으로 변경해 줍니다. 타이핑 실수를 원천 차단합니다.
VS Code의 모든 화면 표시, 동작 방식 설정은 settings.json이라는 단 하나의 파일에 코드로 저장됩니다. 복잡한 체크박스를 찾을 필요 없이 이 코드 파일 하나만 복사해서 다른 컴퓨터에 붙여넣으면 단 1초 만에 나와 완벽히 똑같은 개발 환경이 복제됩니다.
👉 Ctrl + , (맥은 Cmd + ,) 키를 눌러 설정 창을 열고, 우측 상단의 (파일 꺾쇠) 아이콘을 누르면 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(에밋)은 HTML과 CSS를 작성할 때 마법 같은 축약어를 사용하여 타이핑 속도를 10배 이상 폭발적으로 향상시켜 주는 강력한 도구입니다. VS Code에는 이 기능이 아예 기본으로 내장되어 있습니다. 복잡하게 중첩된 태그 구조도 단 한 줄의 축약어로 순식간에 생성할 수 있습니다.
⚡ 업무 시간을 반으로 줄이는 Emmet 치트시트
<div class="box"></div> 코드를 바로 만들어 줍니다.ul 부모 태그 안에 자식인 li 태그를 한 번에 5개 연속으로 생성합니다.<a href="#">클릭</a> 링크를 완성합니다.💡 중요: 축약어를 입력한 뒤 마우스로 클릭하지 말고, 항상 키보드의 Tab 키나 Enter 키를 누르세요!
전문 개발자와 초보 개발자의 가장 큰 차이는 마우스 사용량에 있습니다. 코드를 짤 때 키보드에서 손을 떼고 마우스를 잡는 횟수만 줄여도 코딩 속도와 몰입도는 비약적으로 상승합니다. 아래 단축키들은 머리가 아니라 손가락이 무의식적으로 기억하도록 연습해야 합니다.
📝 광속 코드 편집
- Alt + ↑/↓ : 현재 줄을 드래그 없이 위/아래로 통째로 이동
- Shift + Alt + ↑/↓ : 현재 줄을 그대로 복사해서 위/아래에 붙여넣기
- Ctrl + D : 커서가 있는 단어와 똑같은 다음 단어를 다중 선택 (변수명 일괄 변경 시 핵심)
- Alt + Click : 여러 곳을 클릭해 동시에 여러 줄을 한 번에 수정
🔍 탐색 및 UI 제어
- Ctrl + P : 프로젝트 내의 파일을 이름만 쳐서 광속으로 검색 및 열기
- Ctrl + Shift + F : 전체 프로젝트의 모든 파일 안에서 특정 텍스트 일괄 검색
- Ctrl + B : 왼쪽 파일 탐색기(사이드바)를 숨기거나 나타내기 (화면 넓게 쓰기)
- Ctrl + ` : 하단 터미널(명령 프롬프트) 열기/닫기
VS Code는 단순히 코드를 치는 메모장이 아니라 터미널과 형상 관리(Git) 도구를 완벽하게 내장하고 있는 만능 스튜디오입니다. 개발 시 창을 여러 개 띄우지 않고 VS Code 안에서 모든 것을 해결할 수 있습니다.
🖥️ 통합 터미널 (Integrated Terminal)
Ctrl + ` (백틱) 키를 누르면 화면 하단에 검은색 명령 프롬프트 창이 나타납니다. npm 패키지 설치, 서버 구동, 배포 명령어 등 모든 작업을 이곳에서 처리합니다. 우측의 + 버튼을 누르면 탭처럼 여러 개의 터미널을 동시에 띄워두고(예: 하나는 서버용, 하나는 Git용) 병렬로 작업할 수도 있습니다.
🌳 시각화된 Git 소스 제어 (Source Control)
좌측 사이드바의 세 번째 아이콘(나뭇가지 모양)을 클릭하면 변경된 파일 목록이 직관적으로 보입니다. 굳이 검은 터미널 창에 git add, git commit 명령어를 어렵게 치지 않아도, + 버튼과 커밋 메시지 입력칸만으로 누구나 쉽게 GitHub 연동 작업을 할 수 있습니다.
GitLens를 설치하면 코드를 누를 때마다 해당 줄을 "누가, 언제, 어떤 이유로" 수정했는지 회색 투명한 글씨로 바로 옆에 띄워줍니다. 현업 팀 프로젝트 시 범인을 색출(?)하고 히스토리를 파악하는 절대 무기입니다.