VS Code란? — 왜 개발자들이 가장 많이 쓸까
VS Code(Visual Studio Code)는 Microsoft가 만든 무료 코드 에디터입니다. 2015년 출시 이후 빠르게 성장해서, 지금은 전 세계 개발자의 73% 이상이 사용하는 에디터 1위를 차지하고 있습니다.
인기 비결은 간단합니다. 가볍고, 무료이고, 거의 모든 프로그래밍 언어를 지원합니다. JavaScript, Python, Java, C++, Go 등 어떤 언어로 개발하든 VS Code 하나로 충분합니다.
VS Code vs 다른 에디터
| 에디터 | 가격 | 속도 | 확장성 | 언어 지원 |
|---|---|---|---|---|
| VS Code | 무료 | 빠름 | 50,000+ 확장 | 거의 전부 |
| IntelliJ IDEA | 유료 (연 $170~) | 무거움 | 보통 | Java 특화 |
| Sublime Text | $99 | 매우 빠름 | 적음 | 거의 전부 |
| Vim/Neovim | 무료 | 매우 빠름 | 높음 | 거의 전부 |
Stack Overflow 2025 설문에서 VS Code는 개발자 사용률 1위(73%)를 차지했습니다. 무료이면서 거의 모든 언어를 지원하는 유일한 에디터입니다.
이 글에서는 VS Code를 처음 설치한 상태에서, 실무에 바로 쓸 수 있는 수준까지 세팅하는 전 과정을 다룹니다. 하나씩 따라오시면 됩니다.
VS Code 설치 방법 (Windows · Mac · Linux)
VS Code는 Windows, Mac, Linux 모든 OS에서 사용할 수 있습니다. 아래에서 자신의 OS에 맞는 방법으로 설치하세요.
Windows
1단계: 공식 사이트(code.visualstudio.com)에 접속합니다.
2단계: 'Download for Windows' 버튼을 클릭해서 설치 파일(.exe)을 다운로드합니다.
3단계: 설치 파일을 실행하고, 설치 옵션에서 다음 항목을 반드시 체크합니다:
- PATH에 추가 (Add to PATH) — 터미널에서
code명령어 사용 가능 - 파일 컨텍스트 메뉴에 추가 — 파일 우클릭으로 VS Code 열기 가능
Mac
Homebrew가 설치되어 있다면 터미널에서 한 줄로 끝납니다.
# Mac (Homebrew)
brew install --cask visual-studio-codeHomebrew가 없다면 공식 사이트에서 .dmg 파일을 다운로드해서 설치합니다.
Linux (Ubuntu / Debian)
# Ubuntu / Debian
sudo apt update
sudo apt install code설치 시 'PATH에 추가' 옵션을 꼭 체크하세요. 터미널에서 code . 명령어로 바로 VS Code를 열 수 있습니다.
설치가 끝나면 터미널에서 code .을 입력해보세요. 현재 폴더가 VS Code로 열리면 성공입니다.
설치 직후 꼭 바꿔야 할 기본 설정
VS Code의 모든 설정은 settings.json 파일 하나에 담겨 있습니다. 이 파일만 잘 세팅하면 코딩 효율이 확 달라집니다.
settings.json 여는 방법
방법 1: Ctrl+Shift+P (Mac: Cmd+Shift+P) → Preferences: Open User Settings (JSON) 검색 → 클릭
방법 2: Ctrl+, (Mac: Cmd+,) → 우측 상단의 {} 아이콘 클릭
settings.json은 Ctrl+Shift+P → 'Preferences: Open User Settings (JSON)'으로 열 수 있습니다. GUI 설정보다 JSON 직접 편집이 더 빠르고 정확합니다.
추천 기본 설정
아래 설정을 settings.json에 복사해서 붙여넣으세요.
{
// 자동 저장 (1초 후)
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
// 저장 시 자동 포맷
"editor.formatOnSave": true,
// 폰트 설정
"editor.fontSize": 14,
"editor.fontFamily": "'Fira Code', 'D2Coding', Consolas, monospace",
"editor.fontLigatures": true,
// 탭 설정 (스페이스 2칸)
"editor.tabSize": 2,
"editor.insertSpaces": true,
// 미니맵 끄기 (화면 넓게 쓰기)
"editor.minimap.enabled": false,
// 줄바꿈
"editor.wordWrap": "on",
// 괄호 색상 구분
"editor.bracketPairColorization.enabled": true,
// 마지막 줄 빈 줄 추가
"files.insertFinalNewline": true,
// 후행 공백 자동 제거
"files.trimTrailingWhitespace": true
}각 설정이 뭘 하는지
| 설정 | 효과 |
|---|---|
files.autoSave |
파일을 수정하면 1초 후 자동 저장. Ctrl+S 안 눌러도 됨 |
editor.formatOnSave |
저장할 때 코드 자동 정렬 (Prettier 필요) |
editor.fontLigatures |
=>가 화살표(→)처럼 합쳐져서 보임. 가독성 향상 |
editor.minimap.enabled |
오른쪽 미니맵 제거. 코드 영역이 넓어짐 |
editor.bracketPairColorization |
괄호 쌍마다 다른 색상. 중첩 괄호 구분이 쉬워짐 |
files.trimTrailingWhitespace |
줄 끝 불필요한 공백 자동 제거. Git diff가 깔끔해짐 |
2026 필수 확장 프로그램 TOP 10
VS Code의 진짜 힘은 확장 프로그램(Extensions)에서 나옵니다. 같은 VS Code를 써도 확장 프로그램 세팅에 따라 생산성이 2~3배 달라집니다.
사이드바의 확장 아이콘(Ctrl+Shift+X)을 클릭하면 마켓플레이스에서 바로 검색·설치할 수 있습니다.
카테고리별 필수 확장
| 카테고리 | 확장 이름 | 한 줄 설명 |
|---|---|---|
| 코드 품질 | ESLint | JS/TS 코드 오류·스타일 실시간 검사 |
| Prettier | 저장 시 코드 자동 정렬 (포매터) | |
| 생산성 | Error Lens | 에러/경고를 코드 라인에 바로 표시 |
| Auto Rename Tag | HTML/JSX 여는 태그 수정하면 닫는 태그도 자동 변경 | |
| Path Intellisense | 파일 경로 자동 완성 | |
| Git | GitLens | 코드 라인별 누가 수정했는지 표시 (blame) |
| API 테스트 | Thunder Client | VS Code 안에서 REST API 테스트 (Postman 대체) |
| 협업 | Live Share | 실시간 코드 공유·페어 프로그래밍 |
| 외관 | Material Icon Theme | 파일 형식별 예쁜 아이콘 적용 |
| AI 코딩 | GitHub Copilot | AI가 코드 자동 완성 (월 $10 / 학생 무료) |
터미널에서 한 번에 설치하기
아래 명령어를 터미널에 붙여넣으면 10개 확장을 한 번에 설치할 수 있습니다.
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension usernamehw.errorlens
code --install-extension eamodio.gitlens
code --install-extension formulahendry.auto-rename-tag
code --install-extension christian-kohler.path-intellisense
code --install-extension rangav.vscode-thunder-client
code --install-extension ms-vsliveshare.vsliveshare
code --install-extension PKief.material-icon-theme
code --install-extension GitHub.copilot확장 프로그램은 10~20개가 적정선입니다. 너무 많으면 VS Code가 느려지니, 안 쓰는 확장은 비활성화하세요.
Prettier + ESLint 설정 — 코드 스타일 자동화
Prettier와 ESLint는 함께 쓸 때 가장 강력합니다. Prettier는 코드 모양(포맷)을 잡아주고, ESLint는 코드 품질(오류·패턴)을 잡아줍니다.
다만 둘 다 코드 스타일에 관여하기 때문에, 설정을 잘못하면 서로 충돌이 납니다. 아래 설정을 따라하면 충돌 없이 깔끔하게 동작합니다.
settings.json 설정
{
// Prettier를 기본 포매터로 지정
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
// 저장 시 ESLint 자동 수정
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
// 언어별 포매터 지정
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}.prettierrc 파일 만들기
프로젝트 루트에 .prettierrc 파일을 만들고 아래 내용을 넣으세요.
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "always"
}Prettier와 ESLint가 같은 규칙을 다르게 적용하면 충돌이 납니다. eslint-config-prettier를 설치하면 ESLint의 포맷 규칙을 자동으로 꺼줍니다.
충돌 방지: eslint-config-prettier
# 프로젝트에 설치
npm install -D eslint-config-prettier그리고 .eslintrc.json의 extends 배열 맨 마지막에 "prettier"를 추가하면 됩니다.
{
"extends": ["eslint:recommended", "prettier"]
}이렇게 하면 ESLint가 코드 오류만 잡고, 포맷은 Prettier가 전담합니다. 저장할 때마다 자동으로 정리되니 코드 스타일을 신경 쓸 필요가 없어집니다.
생산성 2배 올리는 단축키 모음
VS Code의 단축키만 잘 써도 마우스 사용량이 절반으로 줄어듭니다. 한 번에 다 외우려 하지 말고, 매주 3개씩만 써보세요.
단축키를 한꺼번에 외우려 하지 마세요. 이번 주에 3개만 써보고, 다음 주에 3개 추가하는 식으로 늘려가면 자연스럽게 익힐 수 있습니다.
파일 탐색 · 검색
| 기능 | Windows | Mac |
|---|---|---|
| 파일 빠르게 열기 | Ctrl+P |
Cmd+P |
| 명령 팔레트 | Ctrl+Shift+P |
Cmd+Shift+P |
| 전체 검색 | Ctrl+Shift+F |
Cmd+Shift+F |
| 파일 내 검색 | Ctrl+F |
Cmd+F |
| 심볼(함수/변수) 이동 | Ctrl+Shift+O |
Cmd+Shift+O |
편집 · 멀티커서
| 기능 | Windows | Mac |
|---|---|---|
| 줄 복사 (아래로) | Shift+Alt+↓ |
Shift+Option+↓ |
| 줄 이동 (위/아래) | Alt+↑/↓ |
Option+↑/↓ |
| 멀티커서 (같은 단어 선택) | Ctrl+D |
Cmd+D |
| 줄 삭제 | Ctrl+Shift+K |
Cmd+Shift+K |
| 되돌리기 / 다시 실행 | Ctrl+Z / Ctrl+Y |
Cmd+Z / Cmd+Shift+Z |
화면 · 터미널
| 기능 | Windows | Mac |
|---|---|---|
| 터미널 열기/닫기 | Ctrl+` |
Ctrl+` |
| 사이드바 토글 | Ctrl+B |
Cmd+B |
| 에디터 분할 | Ctrl+\ |
Cmd+\ |
| 코드 접기/펼치기 | Ctrl+Shift+[/] |
Cmd+Option+[/] |
| 빠른 수정 (Quick Fix) | Ctrl+. |
Cmd+. |
테마 · 폰트 · 아이콘 — 예쁜 에디터 만들기
하루 종일 보는 에디터인 만큼, 눈이 편한 테마와 폰트를 고르는 건 생산성에 직결됩니다.
인기 테마 TOP 5
| 테마 | 분위기 | 다운로드 |
|---|---|---|
| One Dark Pro | 어둡고 따뜻한 톤 | 1,500만+ |
| GitHub Theme | 깔끔한 라이트/다크 | 800만+ |
| Catppuccin | 파스텔 톤 다크 | 400만+ |
| Dracula | 보라+초록 다크 | 600만+ |
| Tokyo Night | 차분한 블루 다크 | 300만+ |
추천 코딩 폰트
| 폰트 | 합자 지원 | 한글 | 특징 |
|---|---|---|---|
| JetBrains Mono | O | X | 가독성 최고, JetBrains 공식 |
| Fira Code | O | X | 합자 폰트의 원조 |
| D2Coding | X | O | 네이버 개발, 한글 최적화 |
한글 개발자라면 D2Coding 폰트를 서브로 넣어두세요. 한글이 깨지지 않고 코딩 가독성도 좋습니다.
테마 · 폰트 설정법
{
"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "material-icon-theme",
"editor.fontFamily": "'JetBrains Mono', 'D2Coding', Consolas, monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 1.6
}Git 연동 — VS Code에서 커밋·푸시·PR까지
VS Code에는 Git이 내장되어 있습니다. 터미널에서 git 명령어를 치지 않아도, GUI로 커밋·푸시·브랜치 관리를 할 수 있습니다.
기본 Git 기능 사용법
1. Source Control 패널 열기: 사이드바에서 분기 아이콘을 클릭하거나 Ctrl+Shift+G를 누릅니다.
2. 변경 파일 확인: 수정된 파일 목록이 표시됩니다. 파일을 클릭하면 diff를 볼 수 있습니다.
3. 스테이징 → 커밋: + 버튼으로 파일을 스테이징하고, 메시지를 입력한 뒤 ✓ 버튼(또는 Ctrl+Enter)으로 커밋합니다.
4. 푸시: 하단 상태바의 동기화 아이콘을 클릭하거나, Source Control 메뉴에서 Push를 선택합니다.
추천 Git 설정
{
"git.autofetch": true,
"git.enableSmartCommit": true,
"terminal.integrated.defaultProfile.windows": "Git Bash"
}GitLens를 설치하면 각 코드 라인 옆에 누가 언제 수정했는지 바로 보입니다. 팀 프로젝트에서 특히 유용합니다.
GitLens로 더 강력하게
GitLens 확장을 설치하면 다음 기능이 추가됩니다:
- Inline Blame: 각 라인 옆에 마지막 수정자·날짜 표시
- File History: 파일 변경 이력 시각화
- Compare Branches: 브랜치 간 차이를 한눈에 확인
AI 코딩 도구 세팅 — GitHub Copilot · Codeium
2026년 VS Code 세팅에서 빼놓을 수 없는 게 AI 코딩 도구입니다. AI가 코드를 자동 완성해주고, 함수를 통째로 제안하고, 에러까지 잡아줍니다.
GitHub Copilot
가장 많이 쓰이는 AI 코딩 도구입니다. 코드를 치다가 잠깐 멈추면, AI가 다음에 올 코드를 회색 글씨로 제안합니다. Tab을 누르면 수락됩니다.
| 항목 | GitHub Copilot | Codeium (무료 대안) |
|---|---|---|
| 가격 | 월 $10 (학생 무료) | 무료 |
| 자동 완성 | 매우 정확 | 좋음 |
| 채팅 기능 | Copilot Chat 내장 | 기본 채팅 |
| 지원 언어 | 거의 전부 | 거의 전부 |
GitHub Copilot은 월 $10이지만, 학생·오픈소스 기여자는 무료입니다. 무료 대안으로는 Codeium이 있습니다.
Copilot 활성화 설정
{
"github.copilot.enable": {
"*": true,
"markdown": true,
"plaintext": false
},
"editor.tabCompletion": "on",
"editor.inlineSuggest.enabled": true
}잘 쓰는 팁
- 주석을 먼저 쓰세요:
// 사용자 이름 유효성 검사 함수라고 주석을 치면, Copilot이 함수 전체를 제안합니다 - Tab으로 수락, Esc로 거절: 제안이 마음에 안 들면 Esc를 누르고 직접 코딩하세요
- Copilot Chat 활용:
Ctrl+I로 인라인 채팅을 열어 "이 함수 리팩토링해줘"라고 요청할 수 있습니다
프로필 · Settings Sync — 어디서든 같은 환경
VS Code는 프로필(Profiles)과 Settings Sync 기능으로, 여러 PC에서 동일한 개발 환경을 유지할 수 있습니다.
프로필 기능
프로젝트 유형별로 확장 프로그램 세트를 분리할 수 있습니다. Python 프로젝트에 TypeScript 확장이 로드될 필요가 없겠죠.
프로필 만들기:
Ctrl+Shift+P→Profiles: Create Profile- 이름 입력 (예: "Python 개발", "React 개발")
- 해당 프로필에서 필요한 확장만 설치
- 프로젝트를 열 때 프로필을 전환
프로필 기능으로 'Python 개발', 'React 개발' 등 프로젝트별 확장 세트를 분리하면 VS Code가 훨씬 가볍게 돌아갑니다.
Settings Sync
GitHub 또는 Microsoft 계정으로 로그인하면, 설정·확장·키바인딩·스니펫이 자동으로 클라우드에 동기화됩니다.
켜는 방법:
- 좌측 하단의 사람 아이콘 클릭
- "Turn on Settings Sync" 선택
- 동기화할 항목 선택 (전체 추천)
- GitHub/Microsoft 계정으로 로그인
이후 새 PC에서 VS Code를 설치하고 같은 계정으로 로그인하면, 모든 세팅이 자동으로 복원됩니다.
복사해서 바로 쓰는 settings.json 전체 설정
지금까지 설명한 모든 설정을 하나의 settings.json으로 합쳤습니다. 아래 코드를 통째로 복사해서 settings.json에 붙여넣으면 바로 사용할 수 있습니다.
{
// === 기본 에디터 ===
"editor.fontSize": 14,
"editor.fontFamily": "'JetBrains Mono', 'D2Coding', Consolas, monospace",
"editor.fontLigatures": true,
"editor.lineHeight": 1.6,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.wordWrap": "on",
"editor.minimap.enabled": false,
"editor.bracketPairColorization.enabled": true,
"editor.linkedEditing": true,
"editor.stickyScroll.enabled": true,
// === 자동 저장 · 포맷 ===
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"files.insertFinalNewline": true,
"files.trimTrailingWhitespace": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
// === 테마 · 아이콘 ===
"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "material-icon-theme",
// === Git ===
"git.autofetch": true,
"git.enableSmartCommit": true,
// === AI ===
"github.copilot.enable": {
"*": true,
"markdown": true,
"plaintext": false
},
"editor.inlineSuggest.enabled": true,
// === 터미널 ===
"terminal.integrated.fontSize": 13,
"terminal.integrated.defaultProfile.windows": "Git Bash"
}이 설정은 범용 추천입니다. 프로젝트나 팀 컨벤션에 따라 tabSize, 포매터 등은 조정하세요.
이 설정을 기반으로 본인의 스타일에 맞게 조금씩 수정해나가면 됩니다. settings.json은 언제든 수정할 수 있으니 부담 없이 시작하세요.
자주 묻는 질문 (FAQ)
Q. VS Code와 Visual Studio는 다른 건가요?
네, 완전히 다른 프로그램입니다. Visual Studio는 Microsoft의 대형 IDE로 주로 C#/.NET 개발에 사용됩니다. VS Code는 가벼운 코드 에디터로, 거의 모든 프로그래밍 언어를 지원합니다. 이름이 비슷해서 헷갈리기 쉽지만, 용도와 무게가 완전히 다릅니다.
Q. 확장 프로그램을 많이 설치하면 느려지나요?
네, 30개 이상이면 체감될 수 있습니다. 10~20개가 적정선이며, 안 쓰는 확장은 비활성화하거나 프로필 기능으로 분리하세요. 어떤 확장이 느리게 만드는지 확인하려면 Ctrl+Shift+P → Developer: Show Running Extensions를 실행하세요.
Q. settings.json과 GUI 설정 중 뭘 써야 하나요?
둘 다 같은 설정을 변경합니다. 초보자는 GUI(Ctrl+,)로 시작하되, 익숙해지면 settings.json이 더 빠르고 백업·공유도 편합니다. 팀 프로젝트에서는 .vscode/settings.json으로 프로젝트별 설정을 공유할 수 있습니다.
Q. GitHub Copilot 무료로 쓸 수 있나요?
학생(GitHub Education), 오픈소스 프로젝트 기여자는 무료입니다. 그 외에는 월 $10입니다. 무료 대안으로 Codeium을 추천합니다. 자동 완성 품질도 꽤 좋고, 개인 사용은 완전 무료입니다.
Q. Mac과 Windows에서 단축키가 다른가요?
기본 구조는 같지만, Windows의 Ctrl이 Mac에서는 Cmd로 바뀝니다. 예: Ctrl+P(Win) = Cmd+P(Mac). 본문의 단축키 표에서 OS별로 정리해두었으니 참고하세요.
