VS Code를 제대로 쓰고 있는가?필수 단축키 30선파일 네비게이션코드 편집코드 탐색멀티커서 실전 활용추천 확장 프로그램필수 확장확장별 핵심 기능settings.json 최적화스니펫 설정워크스페이스 활용실전 팁
vscode생산성도구

VS Code 생산성 200% 올리기 — 단축키, 확장, 설정

· 읽기 9분

VS Code를 제대로 쓰고 있는가?

대부분의 개발자가 VS Code를 사용하지만, 기본 기능의 10%도 활용하지 못하는 경우가 많습니다. 자동차를 1단 기어로만 운전하는 것과 같습니다. 단축키, 확장, 설정을 제대로 익히면 코딩 속도가 체감상 2배 이상 빨라집니다.

필수 단축키 30선

파일 네비게이션

단축키 (Windows/Linux)macOS기능
Ctrl+PCmd+P빠른 파일 열기 (파일명 검색)
Ctrl+Shift+PCmd+Shift+P명령 팔레트
Ctrl+TabCtrl+Tab최근 파일 전환
Ctrl+\Cmd+\에디터 분할
Ctrl+BCmd+B사이드바 토글
Ctrl+JCmd+J터미널 패널 토글
Ctrl+Shift+ECmd+Shift+E파일 탐색기
Ctrl+Shift+FCmd+Shift+F전체 검색

코드 편집

단축키 (Windows/Linux)macOS기능
Alt+Up/DownOpt+Up/Down줄 이동
Shift+Alt+Up/DownShift+Opt+Up/Down줄 복사
Ctrl+Shift+KCmd+Shift+K줄 삭제
Ctrl+DCmd+D같은 단어 다음 선택 (멀티커서)
Ctrl+Shift+LCmd+Shift+L같은 단어 모두 선택
Alt+ClickOpt+Click멀티커서 추가
Ctrl+/Cmd+/줄 주석 토글
Ctrl+Shift+[Cmd+Opt+[코드 접기
Ctrl+Shift+]Cmd+Opt+]코드 펼치기
F2F2심볼 이름 변경 (리팩토링)
Ctrl+.Cmd+.빠른 수정 (Quick Fix)

코드 탐색

단축키 (Windows/Linux)macOS기능
F12F12정의로 이동
Alt+F12Opt+F12정의 미리보기 (팝업)
Shift+F12Shift+F12참조 찾기
Ctrl+GCmd+G특정 줄로 이동
Ctrl+Shift+OCmd+Shift+O현재 파일 심볼 찾기
Ctrl+TCmd+T워크스페이스 심볼 찾기

멀티커서 실전 활용

멀티커서는 VS Code의 가장 강력한 편집 기능입니다.

// 예시: 여러 변수 이름을 한번에 변경
// 변경 전
const userName = "Kim";
const userEmail = "kim@example.com";
const userAge = 30;
const userRole = "admin";

// 1. "user"를 더블클릭으로 선택
// 2. Ctrl+D를 반복하여 나머지 "user" 선택
// 3. "member"로 입력 → 모두 동시 변경

// 변경 후
const memberName = "Kim";
const memberEmail = "kim@example.com";
const memberAge = 30;
const memberRole = "admin";
// 예시: JSON 키를 한번에 따옴표 추가
// 변경 전 (각 줄 끝에 커서를 놓고 동시 편집)
// 1. Ctrl+Shift+L로 모든 "name" 선택
// 2. 또는 Alt+Click으로 원하는 위치에 커서 추가

// 열(Column) 선택: Shift+Alt+드래그
// 여러 줄의 같은 위치에 텍스트를 동시에 입력/삭제할 때 유용

추천 확장 프로그램

필수 확장

// .vscode/extensions.json — 팀원에게 확장 추천
{
  "recommendations": [
    // 코드 품질
    "dbaeumer.vscode-eslint",        // ESLint 통합
    "esbenp.prettier-vscode",        // Prettier 포매터
    "streetsidesoftware.code-spell-checker", // 오타 검사

    // 생산성
    "eamodio.gitlens",               // Git 히스토리, blame, 비교
    "usernamehw.errorlens",          // 에러를 인라인으로 표시
    "christian-kohler.path-intellisense", // 경로 자동완성

    // 언어별
    "bradlc.vscode-tailwindcss",     // Tailwind CSS 자동완성
    "ms-python.python",              // Python 지원
    "golang.go"                      // Go 지원
  ]
}

확장별 핵심 기능

확장핵심 기능왜 필수인가
GitLensgit blame 인라인 표시, 커밋 히스토리코드 작성자와 변경 이유 즉시 확인
Error Lens에러/경고를 해당 줄에 표시Problems 패널을 열 필요 없음
Prettier저장 시 자동 포매팅코드 스타일 통일, 논쟁 종료
Code Spell Checker변수명/주석 오타 검사typo 버그 사전 방지
Path Intellisense파일 경로 자동완성import 경로 오타 방지

settings.json 최적화

// .vscode/settings.json (프로젝트별 설정)
{
  // 저장 시 자동 처리
  "editor.formatOnSave": true,           // 저장 시 포매팅
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",  // 저장 시 ESLint 자동 수정
    "source.organizeImports": "explicit" // 저장 시 import 정리
  },

  // 에디터 설정
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",              // 자동 줄바꿈
  "editor.minimap.enabled": false,       // 미니맵 끄기 (공간 확보)
  "editor.bracketPairColorization.enabled": true, // 괄호 색상 구분
  "editor.guides.bracketPairs": true,    // 괄호 쌍 가이드라인
  "editor.stickyScroll.enabled": true,   // 상단 고정 스크롤 (함수명 표시)
  "editor.inlineSuggest.enabled": true,  // 인라인 제안 (AI 코파일럿 등)

  // 파일 설정
  "files.autoSave": "onFocusChange",    // 포커스 이동 시 자동 저장
  "files.trimTrailingWhitespace": true,  // 줄 끝 공백 제거
  "files.insertFinalNewline": true,      // 파일 끝 빈 줄 추가

  // 탐색기 설정
  "explorer.confirmDelete": false,       // 삭제 확인 끄기
  "explorer.compactFolders": false,      // 폴더 압축 표시 끄기

  // 터미널 설정
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.windows": "Git Bash",

  // 검색 제외 (성능 향상)
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.git": true
  }
}

스니펫 설정

자주 쓰는 코드 패턴을 스니펫으로 등록하면 몇 글자만으로 전체 코드를 생성할 수 있습니다.

// 사용자 스니펫: Ctrl+Shift+P → "Snippets: Configure Snippets"
// typescript.json 또는 global 스니펫 파일
{
  // "cl" 입력 후 Tab → console.log 자동 완성
  "Console Log": {
    "prefix": "cl",
    "body": "console.log('${1:label}:', $2);",
    "description": "console.log 단축"
  },

  // "comp" 입력 후 Tab → React 컴포넌트 생성
  "React Component": {
    "prefix": "comp",
    "body": [
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:Component}({ $3 }: ${1:Component}Props) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}"
    ],
    "description": "React 함수 컴포넌트"
  },

  // "trycatch" 입력 후 Tab → try-catch 블록
  "Try Catch": {
    "prefix": "trycatch",
    "body": [
      "try {",
      "  $1",
      "} catch (error) {",
      "  console.error('${2:에러 발생}:', error);",
      "  $0",
      "}"
    ],
    "description": "try-catch 블록"
  }
}

워크스페이스 활용

// project.code-workspace — 여러 폴더를 하나의 워크스페이스로
{
  "folders": [
    { "path": "./frontend", "name": "Frontend (React)" },
    { "path": "./backend", "name": "Backend (Node)" },
    { "path": "./shared", "name": "Shared Types" }
  ],
  "settings": {
    // 워크스페이스 전체 설정
    "editor.tabSize": 2,
    "typescript.tsdk": "frontend/node_modules/typescript/lib"
  },
  "tasks": {
    "version": "2.0.0",
    "tasks": [
      {
        "label": "풀스택 개발 서버",
        "dependsOn": ["frontend:dev", "backend:dev"],
        "group": "build"
      }
    ]
  }
}

실전 팁

  • Ctrl+P를 습관화하세요: 파일 탐색기에서 클릭하는 대신, 파일명 일부만 입력하면 즉시 이동할 수 있습니다. Ctrl+P 후 #을 붙이면 심볼 검색, :을 붙이면 줄 번호 이동입니다.
  • Ctrl+Shift+P (명령 팔레트)는 만능 도구입니다: 모든 VS Code 기능을 이름으로 검색할 수 있습니다. 단축키를 모르겠으면 여기서 찾으세요.
  • 설정 동기화를 활성화하세요: Settings Sync로 여러 기기에서 동일한 환경을 유지할 수 있습니다 (VS Code 내장 기능).
  • .vscode/ 폴더를 git에 커밋하세요: settings.json, extensions.json, launch.json을 공유하면 팀원 모두 동일한 개발 환경을 갖출 수 있습니다.
  • 키보드에서 손을 떼지 마세요: 마우스를 사용할 때마다 “이 작업을 단축키로 할 수 없을까?”를 고민하세요. 2주만 의식적으로 연습하면 습관이 됩니다.
  • Zen Mode (Ctrl+K Z)를 활용하세요: 집중이 필요할 때 사이드바, 탭, 상태바를 모두 숨겨 에디터만 남길 수 있습니다.

이 글이 도움이 되었나요?