VS Code 설정 완전판 — 시니어 개발자의 작업 환경
VS Code를 진짜로 만들어 쓰는 방법
VS Code를 8년 써왔다. 처음엔 기본 설정으로 썼는데, 시간이 지나면서 커스터마이징에 빠졌다. 매년 설정 파일이 조금씩 바뀌고, 지금의 설정이 가장 안정적이라고 생각한다. 이걸 공유하겠다.
꼭 필요한 확장 (Must-Have Extensions)
너무 많은 확장을 설치하면 VS Code가 느려진다. 정말 필요한 것만 엄선했다.
<?xml version="1.0"?>
// 코드 포매팅 및 린트
- Prettier - Code formatter
- ESLint
- Pylint (Python 개발자)
// 언어 지원
- TypeScript Vue Plugin (Volar)
- Rust-analyzer
- Python
- Go
// 버전 관리
- GitLens — Git supercharged
- Git Graph
- GitHub Pull Requests and Issues
// 생산성
- Thunder Client (API 테스트)
- REST Client
- Database Clients
- Docker
// 테마
- GitHub Dark Default
- One Dark Pro
// 필수 유틸
- Bracket Pair Colorizer 2
- Peacock (워크스페이스 구분)
- Code Spell Checker
- Error Lens
// 개발 보조
- Live Share
- CodeTour
VS Code의 Extension Marketplace에서 직접 이 이름들을 검색해서 설치하면 된다.
settings.json 완성판
<?xml version="1.0"?>
{
// 에디터 기본 설정
"editor.fontFamily": "JetBrains Mono, Courier New",
"editor.fontSize": 13,
"editor.lineHeight": 1.6,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.trimAutoWhitespace": true,
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.prettier": true
},
// 파일 제외
"files.exclude": {
"**/node_modules": true,
"**/.next": true,
"**/.turbo": true,
"**/dist": true,
"**/build": true
},
// 검색 제외
"search.exclude": {
"**/node_modules": true,
"**/dist": true,
"**/.git": true
},
// Prettier 설정
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// ESLint
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"eslint.format.enable": true,
// TypeScript
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true,
"typescript.updateImportsOnFileMove.enabled": "always",
// 터미널
"terminal.integrated.fontSize": 12,
"terminal.integrated.defaultProfile.osx": "zsh",
"terminal.integrated.defaultProfile.linux": "bash",
// Git
"git.autofetch": false,
"git.confirmSync": true,
"gitlens.advanced.telemetry.enabled": false,
// 기타
"workbench.startupEditor": "none",
"workbench.editor.enablePreview": false,
"security.workspace.trust.untrustedFiles": "open",
"breadcrumbs.enabled": true,
"window.zoomLevel": 0
}
keybindings.json 커스텀
<?xml version="1.0"?>
[
// 라인 이동
{
"key": "alt+up",
"command": "editor.action.moveLinesUpAction"
},
{
"key": "alt+down",
"command": "editor.action.moveLinesDownAction"
},
// 포매팅
{
"key": "shift+alt+f",
"command": "editor.action.formatDocument"
},
// 코멘트 토글
{
"key": "cmd+/",
"command": "editor.action.commentLine",
"when": "editorTextFocus && !editorReadonly"
},
// 터미널 포커스
{
"key": "ctrl+`",
"command": "workbench.action.terminal.toggleTerminal"
},
// 사이드바
{
"key": "cmd+b",
"command": "workbench.action.toggleSidebarVisibility"
},
// 파일 탐색
{
"key": "cmd+p",
"command": "workbench.action.quickOpen"
},
// 심볼 검색
{
"key": "cmd+shift+o",
"command": "workbench.action.gotoSymbol"
},
// 전역 심볼 검색
{
"key": "cmd+t",
"command": "workbench.action.showAllSymbols"
},
// 다중 커서
{
"key": "cmd+d",
"command": "editor.action.selectHighlights",
"when": "editorFocus"
}
]
멀티루트 워크스페이스
모노레포 작업할 때 정말 유용하다:
<?xml version="1.0"?>
// monorepo.code-workspace
{
"folders": [
{
"name": "Root",
"path": "."
},
{
"name": "Web App",
"path": "apps/web"
},
{
"name": "API Server",
"path": "apps/api"
},
{
"name": "Admin Panel",
"path": "apps/admin"
},
{
"name": "UI Library",
"path": "packages/ui"
},
{
"name": "Utilities",
"path": "packages/utils"
}
],
"settings": {
"editor.formatOnSave": true,
"files.exclude": {
"**/node_modules": true
}
}
}
// 열기
code monorepo.code-workspace
이렇게 하면 각 폴더가 별도로 표시되고, 전체 모노레포를 효율적으로 관리할 수 있다.
tasks.json으로 자동화
<?xml version="1.0"?>
{
"version": "2.0.0",
"tasks": [
{
"label": "npm: install",
"type": "shell",
"command": "npm",
"args": ["install"],
"presentation": {
"echo": true,
"reveal": "always"
},
"runOptions": {
"runOn": "folderOpen"
}
},
{
"label": "npm: start",
"type": "shell",
"command": "npm",
"args": ["start"],
"presentation": {
"reveal": "always"
}
},
{
"label": "npm: build",
"type": "shell",
"command": "npm",
"args": ["run", "build"],
"group": {
"kind": "build",
"isDefault": true
}
},
{
"label": "npm: test",
"type": "shell",
"command": "npm",
"args": ["test"],
"group": {
"kind": "test",
"isDefault": true
}
},
{
"label": "pnpm: install",
"type": "shell",
"command": "pnpm",
"args": ["install"]
}
]
}
launch.json으로 디버깅
<?xml version="1.0"?>
{
"version": "0.2.0",
"configurations": [
{
"name": "Node.js: Debug",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/src/index.ts",
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
],
"runtimeArgs": ["-r", "ts-node/register"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverride": {
"webpack:///*": "${webRoot}/*"
}
},
{
"name": "Attach to Docker",
"type": "node",
"request": "attach",
"port": 9229,
"address": "localhost"
}
]
}
워크스페이스별 설정
다양한 프로젝트 타입에 맞춘 설정:
<?xml version="1.0"?>
// React 프로젝트용
{
"search.useRipgrep": true,
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"emmet.includeLanguages": {
"typescriptreact": "html"
}
}
// Python 프로젝트용
{
"python.linting.enabled": true,
"python.linting.pylintEnabled": true,
"python.formatting.provider": "black",
"[python]": {
"editor.defaultFormatter": "ms-python.python",
"editor.formatOnSave": true
}
}
// Rust 프로젝트용
{
"[rust]": {
"editor.defaultFormatter": "rust-lang.rust-analyzer",
"editor.formatOnSave": true
}
}
유용한 팁들
- Cmd+Shift+P로 명령 팔레트 열기
- Cmd+K Cmd+S로 키바인딩 전체 목록 보기
- Cmd+, 로 설정 열기
- Peacock 확장으로 워크스페이스별 색상 구분
- GitLens로 파일의 각 라인의 커밋 히스토리 확인
- Thunder Client로 VS Code 안에서 API 테스트
- Debug 패널에서 Watch 추가로 특정 변수 추적
마무리
VS Code는 설정할수록 강력해진다. 처음엔 기본 기능으로 충분하지만, 전문적으로 쓰려면 커스터마이징이 필수다. 내 설정을 기반으로 자신의 워크플로우에 맞게 조정해서 쓰면 된다.
8년 동안 VS Code와 함께하면서, 이보다 더 나은 에디터는 본 적이 없다. 확장성, 성능, 커뮤니티 모두 최고다.