3단계 — VS Code 와 확장팩

코드를 쓰는 도구가 편안해야 학습이 지속됩니다. VS Code 가 무료 · 크로스 플랫폼 · 확장 풍부로 가장 보편적.

1. 설치

macOS — .dmg 열어 Applications 로 드래그
Windows — 설치 시 "PATH 추가" · "code 명령 추가" 체크
Linux — .deb · .rpm 또는 snap

2. 첫 설정 3 가지

Ctrl+, (Win) · Cmd+, (mac) 로 설정 열기.

Format On Save        → ✓ (저장 시 자동 포맷)
Tab Size              → 2
Insert Final Newline  → ✓ (파일 끝 빈 줄)

이 세 가지만 켜도 코드가 훨씬 깔끔해집니다.

3. 필수 확장 5 개

좌측 사이드바 Extensions (Ctrl+Shift+X) 에서 검색:

확장	역할
ESLint	JS/TS 코드 오류 · 스타일 실시간 검출
Prettier	저장 시 자동 포맷
GitLens	각 줄의 커밋 · 작성자 표시
Path Intellisense	import 경로 자동완성
Korean Language Pack	UI 한국어화

설치 후 재시작이 필요한 확장도 있습니다.

4. 언어별 확장

작업할 언어에 맞춰 추가:

JavaScript/TypeScript  → 기본 내장 (확장 불필요)
Python                 → Python (Microsoft)
Java                   → Extension Pack for Java
Rust                   → rust-analyzer
Go                     → Go (Google)
Tailwind CSS           → Tailwind CSS IntelliSense

5. 자주 쓰는 단축키 10 개

키	기능
`Ctrl+P` / `Cmd+P`	파일 빠른 열기
`Ctrl+Shift+P` / `Cmd+Shift+P`	커맨드 팔레트 (모든 기능)
`Ctrl+` `	터미널 열기
`Ctrl+B`	사이드바 토글
`Ctrl+/`	한 줄 주석 토글
`Alt+↑` / `Alt+↓`	줄 이동
`Shift+Alt+↓`	줄 복제
`Ctrl+D`	같은 단어 다음 선택 (multi-cursor)
`F2`	심볼 이름 변경 (파일 전체)
`Ctrl+F` / `Cmd+F`	파일 내 검색

커맨드 팔레트 (Ctrl+Shift+P) 만 확실히 익히면 모든 기능 접근 가능.

6. 프로젝트 루트에 `.vscode/`

팀에 같은 설정 공유하려면:

.vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "eslint.validate": ["javascript", "typescript", "typescriptreact"],
  "files.eol": "\n"
}

.vscode/extensions.json:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss"
  ]
}

팀원이 프로젝트를 열면 VS Code 가 권장 확장 설치를 제안.

7. 통합 터미널

Ctrl+ 로 에디터 아래에 터미널이 뜹니다. 코드 옆에서 바로pnpm dev` 같은 명령을 실행. 프로젝트 루트 기준이라 경로 이동이 필요 없어요.

8. Source Control 탭 (Git 내장)

좌측 Git 아이콘 · 변경 파일 시각화 · 스테이지 · 커밋 모두 UI 로 가능. 터미널 git 명령과 동시에 쓰며 익혀도 OK.

Live Share 확장 설치 후 세션 공유. 상대가 내 에디터에 직접 타이핑 · 터미널 공유 · 포트 포워딩까지 가능. 페어 프로그래밍 · 원격 디버깅에 유용.

10. 자주 걸리는 자리

확장 너무 많이 — VS Code 가 느려짐. 사용하는 것만
내장 터미널 셸 — Windows 는 기본 PowerShell. bash 로 바꾸려면 Ctrl+Shift+P → Terminal: Select Default Profile
포맷이 안 됨 — 파일 우측 하단에 언어 표시 확인. "Plain Text" 면 감지 실패
확장 충돌 — Prettier vs ESLint formatter 중복. editor.defaultFormatter 명시

11. 대안

JetBrains IDE (IntelliJ · WebStorm · PyCharm) — 유료. Java · Kotlin · 대규모 프로젝트에 강함
Neovim + 플러그인 — 키보드 전용 · 가벼움. 학습 곡선 가파름
Cursor · Windsurf — VS Code 기반 + AI 통합 강화

입문에는 VS Code 가 가장 안전한 선택.

하고픈 말

에디터는 평생 쓰는 도구. 단축키 10 개 · 설정 3 개 · 확장 5 개를 하루 쯤 투자해 세팅하면 이후 학습 속도가 확실히 달라집니다.

04-node-pnpm

VS Code Docs · VS Code Tips and Tricks 를 참고합니다.

3. 필수 확장 5 개

좌측 사이드바 Extensions (Ctrl+Shift+X) 에서 검색:

확장

역할

ESLint

JS/TS 코드 오류 · 스타일 실시간 검출

Prettier

저장 시 자동 포맷

GitLens

각 줄의 커밋 · 작성자 표시

Path Intellisense

import 경로 자동완성

Korean Language Pack

UI 한국어화

설치 후 재시작이 필요한 확장도 있습니다.

4. 언어별 확장

작업할 언어에 맞춰 추가:

JavaScript/TypeScript → 기본 내장 (확장 불필요) Python → Python (Microsoft) Java → Extension Pack for Java Rust → rust-analyzer Go → Go (Google) Tailwind CSS → Tailwind CSS IntelliSense

5. 자주 쓰는 단축키 10 개

키

기능

Ctrl+P / Cmd+P

파일 빠른 열기

Ctrl+Shift+P / Cmd+Shift+P

커맨드 팔레트 (모든 기능)

Ctrl+ `

터미널 열기

Ctrl+B

사이드바 토글

Ctrl+/

한 줄 주석 토글

Alt+↑ / Alt+↓

줄 이동

Shift+Alt+↓

줄 복제

Ctrl+D

같은 단어 다음 선택 (multi-cursor)

F2

심볼 이름 변경 (파일 전체)

Ctrl+F / Cmd+F

파일 내 검색

커맨드 팔레트 (Ctrl+Shift+P) 만 확실히 익히면 모든 기능 접근 가능.

6. 프로젝트 루트에 .vscode/

팀에 같은 설정 공유하려면:

.vscode/settings.json:

{ "editor.formatOnSave": true, "editor.tabSize": 2, "editor.insertSpaces": true, "eslint.validate": ["javascript", "typescript", "typescriptreact"], "files.eol": "\n" }

.vscode/extensions.json:

{ "recommendations": [ "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "bradlc.vscode-tailwindcss" ] }

팀원이 프로젝트를 열면 VS Code 가 권장 확장 설치를 제안.

10. 자주 걸리는 자리

확장 너무 많이 — VS Code 가 느려짐. 사용하는 것만

내장 터미널 셸 — Windows 는 기본 PowerShell. bash 로 바꾸려면 Ctrl+Shift+P → Terminal: Select Default Profile

포맷이 안 됨 — 파일 우측 하단에 언어 표시 확인. "Plain Text" 면 감지 실패

확장 충돌 — Prettier vs ESLint formatter 중복. editor.defaultFormatter 명시

3단계 — VS Code 와 확장팩

3단계 — VS Code 와 확장팩

1. 설치

2. 첫 설정 3 가지

3. 필수 확장 5 개

4. 언어별 확장

5. 자주 쓰는 단축키 10 개

6. 프로젝트 루트에 `.vscode/`

7. 통합 터미널

8. Source Control 탭 (Git 내장)

10. 자주 걸리는 자리

11. 대안

하고픈 말

Next

3단계 — VS Code 와 확장팩

3단계 — VS Code 와 확장팩

1. 설치

2. 첫 설정 3 가지

3. 필수 확장 5 개

4. 언어별 확장

5. 자주 쓰는 단축키 10 개

6. 프로젝트 루트에 `.vscode/`

7. 통합 터미널

8. Source Control 탭 (Git 내장)

10. 자주 걸리는 자리

11. 대안

하고픈 말

Next

3단계 — VS Code 와 확장팩

1. 설치

2. 첫 설정 3 가지

3. 필수 확장 5 개

4. 언어별 확장

5. 자주 쓰는 단축키 10 개

6. 프로젝트 루트에 .vscode/

7. 통합 터미널

8. Source Control 탭 (Git 내장)

9. Live Share — 실시간 협업

10. 자주 걸리는 자리

11. 대안

하고픈 말

Next

3단계 — VS Code 와 확장팩

1. 설치

2. 첫 설정 3 가지

3. 필수 확장 5 개

4. 언어별 확장

5. 자주 쓰는 단축키 10 개

6. 프로젝트 루트에 .vscode/

7. 통합 터미널

8. Source Control 탭 (Git 내장)

9. Live Share — 실시간 협업

10. 자주 걸리는 자리

11. 대안

하고픈 말

Next

6. 프로젝트 루트에 `.vscode/`

6. 프로젝트 루트에 `.vscode/`