VS Code 생산성 향상 팁

VS Code는 가장 인기 있는 코드 에디터입니다. 기본 기능과 확장 프로그램을 잘 활용하면 개발 속도가 크게 향상됩니다.

필수 단축키

파일 탐색
Cmd/Ctrl + P          파일 빠른 열기
Cmd/Ctrl + Shift + P  명령 팔레트
Cmd/Ctrl + B          사이드바 토글

편집
Cmd/Ctrl + D          같은 단어 선택 (다중 커서)
Cmd/Ctrl + Shift + L  같은 단어 모두 선택
Alt + 클릭            다중 커서 추가
Cmd/Ctrl + /          주석 토글
Alt + ↑/↓            줄 이동
Shift + Alt + ↑/↓    줄 복사
Cmd/Ctrl + Shift + K  줄 삭제

검색
Cmd/Ctrl + F          파일 내 검색
Cmd/Ctrl + Shift + F  프로젝트 전체 검색
Cmd/Ctrl + H          찾아 바꾸기

코드
F12                   정의로 이동
Shift + F12           참조 찾기
F2                    이름 바꾸기
Cmd/Ctrl + .          빠른 수정 (Quick Fix)

다중 커서 활용

// Cmd/Ctrl + D로 하나씩 선택하며 수정
const user = getUser();
const user = getUser();  // 두 번 누르면 두 번째 user도 선택
const user = getUser();  // 세 번 누르면 세 번째 user도 선택

추천 확장 프로그램

필수

ESLint - 코드 린팅
Prettier - 코드 포맷팅
GitLens - Git 기능 강화
Error Lens - 에러를 라인에 바로 표시

프론트엔드

Tailwind CSS IntelliSense - Tailwind 자동완성
ES7+ React Snippets - React 코드 스니펫
Auto Rename Tag - HTML 태그 자동 수정
Color Highlight - 색상 코드 미리보기

생산성

GitHub Copilot - AI 코드 완성
Path Intellisense - 경로 자동완성
Import Cost - import 크기 표시
Todo Tree - TODO 주석 관리

유용한 설정

settings.json에 추가합니다.

{
  // 저장 시 포맷팅
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 저장 시 import 정리
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },

  // 폰트 설정
  "editor.fontFamily": "'Fira Code', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,

  // 미니맵 끄기
  "editor.minimap.enabled": false,

  // 괄호 쌍 색상
  "editor.bracketPairColorization.enabled": true,

  // 탭 크기
  "editor.tabSize": 2,

  // 자동 저장
  "files.autoSave": "onFocusChange",

  // 파일 제외
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true
  }
}

코드 스니펫

자주 쓰는 코드를 스니펫으로 등록합니다.

// User Snippets > typescriptreact.json
{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:Component}({ $3 }: ${1:Component}Props) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}"
    ]
  },
  "useState": {
    "prefix": "us",
    "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState<${2:string}>(${3:''});"
  },
  "useEffect": {
    "prefix": "ue",
    "body": [
      "useEffect(() => {",
      "  $0",
      "}, [$1]);"
    ]
  }
}

터미널 활용

Ctrl + `             터미널 토글
Ctrl + Shift + `     새 터미널
Cmd/Ctrl + \         터미널 분할

터미널 프로필 설정

{
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 13
}

작업 영역 설정

프로젝트별로 다른 설정을 적용합니다.

// .vscode/settings.json (프로젝트 루트)
{
  "editor.tabSize": 4,
  "typescript.preferences.importModuleSpecifier": "relative"
}

마무리

단축키를 익히는 데 시간이 걸리지만, 한번 익히면 개발 속도가 크게 향상됩니다.

가장 자주 하는 작업부터 단축키를 익히고, 점진적으로 확장해 나가는 것을 추천합니다. Cmd/Ctrl + P와 Cmd/Ctrl + Shift + P만 익혀도 대부분의 작업을 빠르게 할 수 있습니다.