🛠️ TypeScript 개발 환경 세팅 (VSCode + ESLint + Prettier 완전 세팅 가이드)

TypeScript 프로젝트를 본격적으로 시작하려면, VSCode + ESLint + Prettier 3박자를 갖춘 개발 환경이 필수입니다.
이 글에서는 실무에서도 그대로 사용할 수 있는 TypeScript 프로젝트 초기 세팅법을 정리해두었습니다.

---

✅ 1. VSCode 설치 & 필수 확장 추천

📦 VSCode 설치

👉 VSCode 다운로드

🔌 추천 확장 (Extensions)

• ESLint – 코드 스타일 검사
• Prettier - Code Formatter – 코드 자동 정리
• TypeScript Hero 또는 TypeScript Toolbox – import 자동 정리

💡 확장 설치 후, 아래처럼 자동 포맷 적용 설정도 추천합니다.

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.eol": "\n",
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

---

✅ 2. 프로젝트 생성 및 초기 설정

mkdir ts-app && cd ts-app
npm init -y
npm install typescript --save-dev
npx tsc --init

tsconfig.json이 생성됩니다. → (tsconfig 설정은 지난 글 참고)

---

✅ 3. ESLint 설치 및 설정

npm install eslint --save-dev
npx eslint --init

🔧 설정 가이드

아래처럼 질문에 답변해 주세요:

1. To check syntax, find problems, and enforce code style
2. JavaScript modules (import/export)
3. None of these (React/Vue 사용 시 선택)
4. ✅ Yes (TypeScript 사용)
5. Node, Browser (필요한 플랫폼 선택)
6. Use a popular style guide → Airbnb 또는 Standard
7. JSON 또는 JS

🔌 추가 패키지 설치

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

---

✅ 4. Prettier 설치 및 설정

npm install prettier --save-dev

🔧 .prettierrc.json 예시

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

---

✅ 5. ESLint + Prettier 통합 설정 (중요!)

.eslintrc.json 예시

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

💡 TypeScript 관련 패키지 설치

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

---

✅ 6. VSCode에서 자동 포맷 확인

VSCode 설정에서 formatOnSave와 codeActionsOnSave 옵션이 적용돼 있다면,
파일 저장 시 ESLint 검사 + Prettier 포맷이 자동으로 실행됩니다.

제대로 동작하지 않을 경우:

Ctrl + Shift + P → Format Document With... → Prettier 선택

---

📦 package.json에 스크립트 추가

{
  "scripts": {
    "lint": "eslint './src/**/*.{ts,tsx}'",
    "format": "prettier --write './src/**/*.{ts,tsx,js,jsx,json,css,md}'"
  }
}

---

✨ 다음 글 예고

👉 [기본 타입 정복 - number, string, boolean 등 기본부터 탄탄히!]