Ch 04. VS Code 생산성 높이기

VS Code는 TypeScript 개발에 최적화된 에디터입니다. TypeScript 언어 서버가 내장되어 있어 별도 플러그인 없이도 강력한 기능을 제공합니다. 알아두면 바로 써먹을 수 있는 기능들을 정리합니다.

자동 임포트

함수나 타입을 쓰다 보면 import 문을 수동으로 추가해야 할 때가 많습니다. VS Code는 이를 자동으로 처리합니다.

타입이나 함수 이름을 입력하면 자동완성 목록에 "Add import from" 항목이 나타납니다. 선택하면 파일 상단에 import 문이 자동으로 추가됩니다.

자동 임포트 정리.

더 이상 쓰지 않는 import 문을 지울 때 사용합니다.

• macOS: Shift+Option+O
• Windows/Linux: Shift+Alt+O

이 단축키 하나로 사용하지 않는 임포트를 모두 제거합니다.

저장 시 자동 정리 설정.

settings.json에 추가하면 파일을 저장할 때마다 사용하지 않는 임포트를 자동으로 제거합니다.

// .vscode/settings.json{  "editor.codeActionsOnSave": {    "source.organizeImports": "explicit"  }}

타입 정보 인라인 확인

변수나 함수에 마우스를 올리면 타입 정보가 팝업으로 표시됩니다.

const users = [  { id: 1, name: "Alice", role: "admin" },  { id: 2, name: "Bob", role: "user" },];// users에 마우스 올리면:// const users: { id: number; name: string; role: string; }[]

추론된 타입이 예상과 다르다면 타입 정의를 다시 확인할 신호입니다.

인라인 타입 힌트 (Inlay Hints)

VS Code 설정에서 인라인 힌트를 켜면 타입을 코드 옆에 직접 표시합니다.

// .vscode/settings.json{  "typescript.inlayHints.parameterNames.enabled": "all",  "typescript.inlayHints.variableTypes.enabled": true,  "typescript.inlayHints.returnTypes.enabled": true}

활성화하면 다음처럼 보입니다.

// 화면에 표시되는 모습 (힌트는 회색으로 나타남)const result /*: number*/ = add(/*a:*/ 1, /*b:*/ 2);

처음에는 어색하지만 타입을 명시하지 않은 코드에서 타입 흐름을 파악하는 데 유용합니다.

리팩터링 단축키

이름 바꾸기 (Rename Symbol).

변수, 함수, 타입의 이름을 프로젝트 전체에서 일괄 변경합니다.

• macOS: F2
• Windows/Linux: F2

함수 이름 위에 커서를 놓고 F2를 누르면, 그 함수를 참조하는 모든 곳의 이름이 한 번에 바뀝니다. import 문도 함께 업데이트됩니다.

정의로 이동 (Go to Definition).

함수나 타입의 원본 정의로 이동합니다.

• macOS: F12 또는 Cmd+클릭
• Windows/Linux: F12 또는 Ctrl+클릭

참조 찾기 (Find All References).

해당 심볼을 사용하는 모든 위치를 찾습니다.

• macOS: Shift+F12
• Windows/Linux: Shift+F12

빠른 수정 (Quick Fix).

오류가 있는 코드에 커서를 놓고 실행하면 자동 수정 옵션이 나타납니다.

• macOS: Cmd+.
• Windows/Linux: Ctrl+.

타입 오류, 누락된 임포트, 미구현 인터페이스 등을 자동으로 수정해줍니다.

ESLint 설정

ESLint는 코드 품질을 검사합니다. TypeScript와 함께 사용하려면 @typescript-eslint 패키지가 필요합니다.

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

eslint.config.js (flat config 형식, ESLint 9+)를 생성합니다.

// 새 파일: eslint.config.jsimport eslint from "@eslint/js";import tseslint from "@typescript-eslint/eslint-plugin";import tsparser from "@typescript-eslint/parser";export default [  eslint.configs.recommended,  {    files: ["**/*.ts", "**/*.tsx"],    languageOptions: {      parser: tsparser,      parserOptions: {        project: "./tsconfig.json",      },    },    plugins: {      "@typescript-eslint": tseslint,    },    rules: {      "@typescript-eslint/no-explicit-any": "warn",      "@typescript-eslint/no-unused-vars": "error",      "@typescript-eslint/explicit-function-return-type": "off",      "no-console": "warn",    },  },];

package.json에 lint 스크립트를 추가합니다.

// 수정: package.json{  "scripts": {    "dev": "tsx watch src/index.ts",    "build": "tsc",    "typecheck": "tsc --noEmit",    "lint": "eslint src",    "lint:fix": "eslint src --fix"  }}

Prettier 설정

Prettier는 코드 포매터입니다. 팀 전체가 동일한 스타일을 유지하게 해줍니다.

npm install -D prettier eslint-config-prettier

// 새 파일: .prettierrc{  "semi": true,  "singleQuote": false,  "tabWidth": 2,  "trailingComma": "es5",  "printWidth": 100,  "arrowParens": "avoid"}

저장 시 자동 포매팅을 설정합니다.

// .vscode/settings.json{  "editor.formatOnSave": true,  "editor.defaultFormatter": "esbenp.prettier-vscode",  "[typescript]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[typescriptreact]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "editor.codeActionsOnSave": {    "source.organizeImports": "explicit"  }}

.vscode 폴더 공유

팀 프로젝트에서 .vscode/settings.json을 Git에 커밋하면 팀원 모두가 동일한 에디터 설정을 사용합니다.

.vscode/
├── settings.json    ← 에디터 설정 (커밋 권장)
├── extensions.json  ← 권장 확장 목록 (커밋 권장)
└── launch.json      ← 디버거 설정 (커밋 권장)

extensions.json에 필수 확장을 명시하면 팀원이 저장소를 열 때 VS Code가 설치를 권유합니다.

// 새 파일: .vscode/extensions.json{  "recommendations": [    "ms-vscode.vscode-typescript-next",    "dbaeumer.vscode-eslint",    "esbenp.prettier-vscode",    "usernamehw.errorlens"  ]}

디버깅 설정

tsx로 실행하는 Node.js TypeScript 코드를 VS Code 디버거로 직접 디버깅할 수 있습니다.

// 새 파일: .vscode/launch.json{  "version": "0.2.0",  "configurations": [    {      "type": "node",      "request": "launch",      "name": "Debug TypeScript",      "runtimeExecutable": "node",      "runtimeArgs": ["--import", "tsx"],      "program": "${workspaceFolder}/src/index.ts",      "cwd": "${workspaceFolder}",      "sourceMaps": true,      "skipFiles": ["<node_internals>/**"]    }  ]}

F5를 누르면 TypeScript 파일을 직접 디버깅할 수 있습니다. 중단점을 .ts 파일에 설정하면 컴파일된 .js가 아닌 원본 파일에서 멈춥니다.

정리

개발 효율을 높이는 핵심 설정을 요약합니다.

PART 01의 환경 설정이 완료됩니다. PART 02부터는 TypeScript 타입 시스템을 본격적으로 다룹니다.