Node.js 프로젝트에 ESLint + Prettier 도입하기

문제 상황

5명이 참여하는 Node.js API 프로젝트에서 코드 리뷰 시간의 30%가 들여쓰기, 세미콜론 유무 등 스타일 논쟁으로 소모되고 있었다. 각자 에디터 설정이 달라 커밋마다 포맷팅 변경사항이 섞여 diff 확인이 어려웠다.

ESLint 설정

Airbnb 스타일 가이드를 베이스로 선택했다.

npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import

.eslintrc.json:

{
  "extends": "airbnb-base",
  "env": {
    "node": true,
    "es6": true
  },
  "rules": {
    "no-console": "off",
    "comma-dangle": ["error", "never"]
  }
}

Prettier 통합

ESLint와 Prettier를 함께 사용하면서 룰 충돌이 발생했다. eslint-config-prettier로 해결했다.

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

.eslintrc.json의 extends 배열 마지막에 "prettier" 추가:

{
  "extends": ["airbnb-base", "prettier"]
}

.prettierrc:

{
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 100
}

Pre-commit Hook

husky와 lint-staged로 커밋 전 자동 검사를 추가했다.

npm install --save-dev husky lint-staged

package.json:

{
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write \"**/*.js\""
  },
  "lint-staged": {
    "*.js": ["eslint --fix", "prettier --write", "git add"]
  }
}

결과

도입 2주 후 코드 리뷰 시간이 40% 단축되었다. 스타일 관련 논쟁이 사라지고 로직에 집중할 수 있게 되었다. 초기 기존 코드 마이그레이션에 반나절 정도 소요되었지만 충분히 가치있는 투자였다.