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

ESLint가 TypeScript 코드 품질을 높이는 방법

ESLint는 JavaScript와 TypeScript 코드를 정적으로 분석해서 잠재적인 버그나 안티패턴을 찾아주는 도구다. 코드를 실행하지 않고도 사용하지 않는 변수, 잘못된 타입 비교, 잠재적 null 참조 같은 문제를 잡아낼 수 있다. TypeScript를 쓴다면 @typescript-eslint 플러그인을 함께 써야 TypeScript 특화 규칙을 적용할 수 있다. TypeScript 컴파일러가 타입 오류를 잡아주지만, ESLint는 그보다 더 넓은 범위의 코드 품질 문제를 다룬다. 예를 들어 any 타입 사용 금지, 불필요한 타입 단언 경고, console.log 사용 제한 같은 규칙을 설정할 수 있다. 팀 프로젝트에서 ESLint 규칙을 공유하면 코드 리뷰에서 반복적으로 지적되는 패턴을 자동화해서 사람이 더 중요한 로직 리뷰에 집중할 수 있다. 직접 써봤더니 PR마다 스타일 관련 코멘트가 반복되던 문제가 ESLint 도입 후 거의 사라졌다. rules 설정에서 error, warn, off 세 단계로 규칙의 강도를 조절할 수 있어서 팀 상황에 맞게 점진적으로 강화할 수 있다.

Prettier로 TypeScript 코드 형식을 자동으로 통일하는 방법

Prettier는 코드 포맷터로, 들여쓰기 크기, 따옴표 종류, 세미콜론 사용 여부, 줄 길이 등 코드 형식을 일관되게 맞춰주는 도구다. ESLint가 코드 품질을 검사한다면 Prettier는 코드 형식만 담당한다고 볼 수 있다. Prettier의 가장 큰 장점은 설정 옵션이 적다는 점이다. 스타일 결정에 들어가는 팀 논의를 줄이고, 어떻게 작성해도 저장 시 자동으로 정해진 형식으로 바꿔준다. VS Code에서 Format on Save 설정과 Prettier 익스텐션을 함께 쓰면 파일을 저장할 때마다 자동으로 포맷이 적용된다. Prettier 설정은 프로젝트 루트의 .prettierrc 파일에 JSON 형태로 작성한다. 자주 쓰는 설정은 printWidth(줄 최대 길이), tabWidth(들여쓰기 크기), singleQuote(작은따옴표 사용 여부), trailingComma(후행 쉼표 사용 여부) 정도다. 팀마다 선호하는 스타일이 다를 수 있지만 Prettier 설정 파일을 프로젝트에 커밋해두면 모든 팀원이 같은 포맷을 쓰게 된다.

ESLint와 Prettier 충돌 없이 TypeScript 프로젝트에 함께 설정하는 방법

ESLint와 Prettier를 함께 쓸 때 가장 흔하게 겪는 문제가 규칙 충돌이다. ESLint에도 들여쓰기, 따옴표 같은 포맷 관련 규칙이 있는데, 이 규칙이 Prettier의 포맷 결과와 다르면 저장할 때마다 포맷이 왔다갔다하는 현상이 생긴다. 처음 설정할 때 이 충돌을 몰라서 한참 고생했다. 해결책은 eslint-config-prettier 패키지를 설치하고 ESLint 설정의 extends 마지막에 추가하는 것이다. 이 패키지는 Prettier와 충돌하는 ESLint 규칙을 전부 비활성화한다. 그러면 ESLint는 코드 품질만 담당하고 포맷은 Prettier가 전담하는 역할 분리가 된다. TypeScript 프로젝트라면 설치해야 할 패키지는 eslint, prettier, @typescript-eslint/parser, @typescript-eslint/eslint-plugin, eslint-config-prettier다. eslint-plugin-prettier는 Prettier를 ESLint 규칙으로 실행하는 방식인데, 요즘은 이보다 Prettier를 별도로 실행하고 ESLint와 역할을 분리하는 방식을 더 권장한다.

// .eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "no-console": "warn"
  }
}

husky와 lint-staged로 TypeScript ESLint 커밋 자동화하는 방법

ESLint와 Prettier를 설정해도 팀원이 실행하지 않으면 의미가 없다. husky는 Git 훅을 쉽게 설정할 수 있게 해주는 도구로, 커밋이나 푸시 전에 특정 명령을 자동으로 실행할 수 있다. lint-staged는 변경된 파일에만 린터와 포맷터를 실행해서 전체 프로젝트를 검사하는 것보다 빠르게 동작한다. npx husky init으로 husky를 초기화하면 .husky 폴더가 생성된다. pre-commit 훅 파일에 npx lint-staged를 추가하면 커밋 시 자동으로 실행된다. lint-staged 설정은 package.json에 추가한다. 패턴별로 실행할 명령을 지정할 수 있어서 TypeScript 파일은 ESLint를, 모든 파일은 Prettier를 실행하도록 나눠서 설정할 수 있다. 직접 팀에 적용해보니 설정 후 린트 오류가 main 브랜치에 머지되는 일이 없어졌다. CI에서도 eslint 명령을 실행해 두 번 검증하면 더 안전하다.