⚙️ TypeScript 개발 환경 설정 완벽 가이드 (tsconfig, ESLint, Prettier)

1. tsconfig.json

tsconfig.json은 TypeScript 프로젝트에서 컴파일 설정을 정의하는 파일이다. 즉, TypeScript 코드를 JavaScript로 변환하는 방식을 결정한다.

tsconfig.json은 크게 compilerOptions와 파일 선택 옵션들로 나뉜다.

- compilerOptions

compilerOptions는 TypeScript가 JavaScript로 변환될 때의 출력 형태, 타입 검사 방식, 모듈 해석 방식 등을 정의하는 설정이다.

주요 옵션은 다음과 같다.

• target: 어떤 버전의 JavaScript로 변환할지를 결정
  예) ES5 / ES6 / ES2020
• module: 모듈 시스템을 설정
  예) commonjs / esnext
• outDir: 컴파일된 JS 파일의 위치를 설정
• rootDir: 소스 코드 기준 폴더를 설정
• strict: 엄격한 타입 검사와 관련된 8가지 하위 옵션을 모두 활성화
  예) noImplicitAny, strictNullChecks
• moduleResolution: 모듈의 경로를 실제 파일 시스템에서 어떻게 찾아낼지를 지정하는 옵션
  예) Node,NodeNext, Bundler
• baseUrl / paths: 절대경로의 기준이 되는 기본 디렉토리와 baseUrl을 기준으로 Alias 경로를 설정
• sourceMap: .map 파일 생성 여부
• declaration: .d.ts 타입 정의 파일 생성 여부
• removeComments: JS 변환 시 주석 제거
• skipLibCheck: 라이브러리 타입 검사 생략 여부
• noEmit: JS 파일 생성 여부
• allowJs: JS 파일 사용 여부
• esModuleInterop: CommonJS와 ESModule 호환 개선

- include / exclude

컴파일 대상 파일 집합을 결정한다. include는 포함할 파일 범위를 지정하고, exclude는 그 후보 중 일부를 제외한다.

단, exclude에 명시적으로 포함된 파일은 include보다 우선하며, files 옵션이 존재할 경우 exclude보다 우선하여 무조건 컴파일에 포함된다.

자주 사용되는 기본 예시

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "outDir": "dist",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

2. ESLint

ESLint란 JavaScript / TypeScript 코드에서 문제를 찾아주는 정적 분석 도구이다. 버그 가능성, 사용하지 않는 변수, 위험한 코드 패턴 등을 코드를 실행하지 않고 분석하여 찾아낸다.

ESLint는 Parser, Rules, Config의 3가지로 구성된다.

- Parser

코드를 분석하여 추상 구문 트리로 변환하는 역할을 한다. 기본적으로 ESLint는 JavaScript를 파싱하지만, TypeScript를 사용할 경우 @typescript-eslint/parser를 사용하여 TypeScript 문법을 이해하도록 설정해야 한다.

- Rules

코드에서 어떤 패턴을 허용하고 금지할지를 정의하는 핵심 요소이다. 대표적인 규칙은 다음과 같다.

• no-unused-vars: 사용되지 않는 변수 금지
• no-console: console 사용 제한
• eqeqeq: == 대신 === 사용 강제
• semi: 세미콜론 사용 여부 설정

- Config

ESLint의 동작 방식을 정의하는 설정 파일이다. .eslintrc.js, .eslintrc.json, eslint.config.js 등의 형태로 작성할 수 있다.

ESLint 기본 설정 예시

// eslint.config.js
import js from "@eslint/js";
import tsParser from "@typescript-eslint/parser";
import tsPlugin from "@typescript-eslint/eslint-plugin";
import globals from "globals";

export default [
  js.configs.recommended,
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: {
      parser: tsParser,
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
    plugins: {
      "@typescript-eslint": tsPlugin,
    },
    rules: {
      "no-console": "warn",
      "@typescript-eslint/no-unused-vars": "error",
    },
  },
];

3. Prettier

Prettier는 코드 스타일을 자동으로 정리해주는 코드 포맷터이다. ESLint가 문제를 찾는 도구라면, Prettier는 코드 형태를 정리하는 도구라고 볼 수 있다.

들여쓰기, 따옴표, 줄바꿈, 세미콜론 같은 포맷을 자동으로 맞춰준다.

Prettier 설정 예시

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}