ESLint, Prettier TypeScript 설정 가이드 — 팀 코드 스타일을 통일하는 방법

팀 협업에서 일관성 있는 ESLint 코드 스타일 규격의 가치

프로젝트 소스 코드의 스타일이 작성한 사람의 버릇에 따라 중구난방으로 퍼져 있으면 가독성이 곤두박질치고 인수인계가 고통스러워집니다. 특히 버전 형상 관리 측면에서, 단순 콤마 찍기나 세미콜론 누락 같은 의미 없는 텍스트 포맷 변경이 불필요하게 Git Diff 지표에 노출되어, 실제 비즈니스 로직의 변경점 추적을 방해하고 리뷰어의 시야를 흐리는 악영향을 초래합니다. 코드 정적 분석과 통일된 서식 규칙은 팀 협업 코드의 품질을 공장 라인처럼 일정하고 정갈하게 뽑아주는 강력한 인프라 투자입니다.

품질 진단과 자동 서식을 양분하는 ESLint 및 Prettier 역할 분담

초보 개발자들이 가장 많이 오해하는 지점이 두 도구의 기능을 혼용해 생각하는 것입니다. ESLint 는 코드 품질(Quality)을 수호합니다. '선언되지 않은 변수를 참조하지는 않는가', '쓰이지 않는 임포트가 방치되어 있진 않은가' 같은 잠재성 버그와 나쁜 코드 냄새를 정적 분석해 빨간 줄을 띄워 주죠. 반면 Prettier 는 오직 코드 서식(Formatting)만을 담당합니다. 한 줄 최대 글자 제한, 홑따옴표 사용 여부, 세미콜론 부착 규칙 등 미관상의 스타일을 가차 없이 정렬해 줍니다. 이 둘의 명확한 역할 경계를 구분 짓고 파이프라인을 조립해야 툴 셋팅이 꼬이지 않습니다.

정밀 린트 규칙 설정을 위한 ESLint TypeScript 파서 바인딩

TypeScript 환경에서 ESLint가 자바스크립트용 내장 기본 파서로 동작하려 들면, 인터페이스(interface)나 제네릭 같은 독자적 컴파일 기호들을 해석하지 못하고 문법 오류 콘솔을 뿌려댑니다. 이를 해소하기 위해 타입스크립트용 고유 구문 파서인 @typescript-eslint/parser 와 규칙 플러그인 플랫 파일들을 패키지로 다운 받아 연결해야 하죠. 이렇게 이식해 두면 타입스크립트의 특수한 정적 다형성 및 타입 오버라이드 환경에 최적화된 고차원적인 린트 진단이 부드럽게 성립됩니다.

두 도구 간 포맷 충돌을 차단하는 eslint-config-prettier 연동 요령

가장 흔히 저지르는 세팅 삽질 중 하나는, ESLint 내부의 서식 규칙과 Prettier의 포맷 설정이 상호 충돌하여 코드를 저장할 때마다 두 도구가 파일 내용을 서로 다르게 덮어쓰며 무한 수정 뺑뺑이를 유도하는 버그입니다. 이를 깔끔하게 중재하기 위해 **eslint-config-prettier 라이브러리를 추가해 주는 것이 필수적입니다.** 이 컴포넌트 팩이 린트 설정에 맵핑되면, ESLint 안에서 작동하며 Prettier의 서식 룰과 중복 충돌을 일으키던 자잘한 포맷 규칙들을 싹 비활성화 잠금 시켜주어, 포맷은 Prettier가 전담하고 품질 검사는 ESLint가 처리하는 깔끔한 평화 조약이 완성됩니다.

// .eslintrc.json - 타입스크립트와 프리티어 평화 조약 설정 예시
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier" // eslint-config-prettier가 마지막에 와서 충돌하는 린트 포맷 룰을 영구 잠금 처리
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error", // 미사용 변수 선언 시 가차 없이 빌드 에러 처리
    "no-console": "warn" // 실무 실수로 삽입된 콘솔 로그 감지 시 노란 경고
  }
}

저장 즉시 오류를 수정하는 VS Code 및 husky 코드 검사 자동화

설정을 마쳤다면 팀원들의 로컬 VS Code 에디터 자체에 저장 단추를 누르는 즉시 도구들이 알아서 고치도록 환경 설정을 강제 이식해야 합니다. 프로젝트 루트 폴더에 .vscode/settings.json 파일을 파고 editor.codeActionsOnSave 내부에 source.fixAll.eslint: "always" 속성을 박아주면 코딩 효율이 극대화됩니다. 이에 덧붙여, 깃 커밋 트랙에 묶여 돌아가는 husky 와 lint-staged 패키지를 적용해 두면, 혹여 린트 경고를 무시하고 억지로 커밋을 쏘려는 불량 소스를 커밋 개시 2초 전에 강제 검진하여 반려 처리하므로, 깃 저장소에 늘 투명하고 아름다운 코드셋만 격리 상주하게 인프라를 보위할 수 있습니다.

// .vscode/settings.json - 저장 시 자동 린트 교정 강제 설정
{
  "editor.formatOnSave": false, // 기본 포맷터 작동을 중지시키고
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always" // 저장하는 찰나의 순간에 ESLint 가 오류 자동 교정을 이행
  }
}