Binyard

Appearance

Prettier 정리 ​

🧩 Reference

  • Prettier: 코드의 형식(Formatting)을 자동으로 정리하는 포맷터
  • ESLint: 버그와 안티패턴을 잡아주는 코드 품질 도구
  • eslint-config-prettier: Prettier와 충돌하는 ESLint 규칙 비활성화

왜 Prettier가 필요할까? ​

팀 프로젝트를 하다 보면 이런 상황이 생긴다.

  • 작은따옴표 쓸까요, 큰따옴표 쓸까요?
  • 세미콜론은 붙이나요?
  • PR 리뷰에서 "여기 들여쓰기 맞춰주세요" 같은 댓글

이런 스타일 논쟁에 시간을 쓰는 대신, Prettier가 자동으로 정리하게 하면 로직에만 집중할 수 있다.


🧩 프로젝트에 적용하면서 깨달은 점과 정리

  • Prettier는 “내 취향”이 아니라 팀의 시간을 아끼는 도구다.
  • 코드 스타일 논쟁을 줄이고, 리뷰는 로직에 집중하게 된다.
  • ESLint와 겹치는 영역이 있어 충돌이 날 수 있는데, 이건 설정으로 해결할 수 있다.

Prettier란? ​

Prettier는 코드의 의미를 바꾸지 않고, 형식(Formatting)만 자동으로 정리해주는 도구다.
줄바꿈, 들여쓰기, 따옴표, trailing comma 같은 “사소하지만 계속 신경 쓰이는 부분”을 자동으로 맞춰준다.

쉽게 말해, 코드는 내가 쓰고, 정리는 Prettier가 한다. 🧹


ESLint vs Prettier ​

  • ESLint: 버그가 될 수 있는 코드, 안티패턴, 규칙 위반을 잡는다.
  • Prettier: 스타일을 강제하고 자동으로 포맷팅한다.

즉, Prettier는 코드 포맷, ESLint는 코드 품질을 담당하도록 역할을 나누는 게 가장 깔끔하다.


설치 및 설정 ​

1. Prettier 설치 ​

bash
npm i -D prettier

2. Prettier × ESLint 충돌 해결 ​

ESLint에도 코드 스타일 관련 규칙이 많아서, Prettier와 함께 사용하면 서로 다른 기준으로 코드를 수정하며 충돌이 날 수 있다. 그래서 eslint-config-prettier를 사용해 Prettier와 겹치는 ESLint 규칙을 꺼준다.

설치 ​

bash
npm i -D eslint-config-prettier

ESLint Flat Config에 연동 ​

ESLint 설정의 extends 마지막에 prettier를 추가한다.

ts
extends: [
  js.configs.recommended,
  tseslint.configs.recommended,
  reactHooks.configs.flat.recommended,
  reactRefresh.configs.vite,
  prettier, // 충돌 방지 (반드시 마지막에)
],

이렇게 하면, ESLint는 코드 품질 규칙만 담당하고 스타일 문제는 Prettier가 전담하게 된다.


3. .prettierrc 설정 파일 작성 ​

프로젝트 루트에 .prettierrc 파일을 만들어 포맷 규칙을 설정한다.

json
{
  "semi": false,
  "trailingComma": "es5",
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
  "bracketSpacing": true,
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"]
}

특히 Tailwind를 사용하는 프로젝트에는 prettier-plugin-tailwindcss를 함께 적용해 클래스 순서를 자동 정렬하도록 한다.


Tailwind 플러그인 설치 ​

bash
npm i -D prettier-plugin-tailwindcss

주요 옵션 설명 ​

옵션의미왜 썼는지
semi: false세미콜론 미사용현대 JS 스타일에 깔끔함
singleQuote: true작은따옴표 사용React/TS에서 일반적
tabWidth: 2들여쓰기 2칸웹 프론트 표준에 가까움
printWidth: 80줄 길이 제한가독성 유지
trailingComma: "es5"후행 쉼표 허용git diff가 깔끔
plugins: ["prettier-plugin-tailwindcss"]Tailwind 자동 정렬클래스 순서 자동 정리

Prettier 실행 방식 ​

1. 수동 실행 ​

전체 프로젝트 정리:

bash
npx prettier . --write

특정 파일만 정리:

bash
npx prettier src/App.tsx --write

2. 커밋 단계 자동 실행 (Husky + lint-staged) ​

새로 진행하는 프로젝트에서는 별도의 format 스크립트를 만들지 않았다.
대신 lint-staged를 사용해 커밋 시점에 자동으로 Prettier가 실행되도록 구성했다. 따라서 개발자가 수동으로 포맷을 실행하지 않아도, 커밋 단계에서 코드가 정리된다.

lint-staged 설정: ​

json
"lint-staged": {
  "*.{ts,tsx,js}": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{css,md}": [
    "prettier --write"
  ]
}

장점

  • 개발자는 신경 쓰지 않아도 된다.
  • 커밋 기록이 항상 정돈된 상태로 유지된다.
  • 스타일 문제로 리뷰가 오가는 일이 줄어든다.

3. format 스크립트는 언제 쓰면 좋을까? ​

많은 프로젝트에서 다음과 같은 스크립트를 추가해 Prettier를 실행한다.

json
{
  "scripts": {
    "format": "prettier . --write",
    "format:check": "prettier . --check"
  }
}

각 명령어의 의미:

  • npm run format
    → 프로젝트 전체 코드를 한 번에 정리(자동 수정)

  • npm run format:check
    → 코드를 고치지는 않고, 포맷이 깨진 파일이 있는지만 검사 → 주로 CI(자동 검사 환경)에서 사용

새로운 프로젝트에 안 넣은 이유

새로운 프로젝트에서는 별도의 format 스크립트를 추가하지 않았다. 그 이유는 이미 lint-staged를 통해 커밋 단계에서 자동으로 Prettier를 실행하고 있기 때문이다.

즉, 수동으로 npm run format을 돌리지 않아도 커밋할 때 자동으로 정리되기 때문에 작업 흐름상 굳이 추가하지 않아도 충분하다고 판단했다.

다음 상황이 생긴다면 format 스크립트를 추가해도 좋다.

  • 커밋 전에 전체 코드를 한 번에 정리하고 싶을 때
  • CI에서 포맷 검사를 자동으로 돌리고 싶을 때

그럴 경우 package.json에 아래처럼 추가하면 된다.

json
{
  "scripts": {
    "format": "prettier . --write",
    "format:check": "prettier . --check"
  }
}

CI에서 사용 예시 (GitHub Actions):

yaml
# .github/workflows/ci.yml
- name: Check code formatting
  run: npm run format:check

이렇게 하면 PR이 올라올 때마다 자동으로 포맷 검사를 실행할 수 있다.



💡 정리

  • Prettier는 코드 의미가 아니라 형식(Formatting)을 자동으로 정리한다.
  • ESLint는 코드 품질/실수 방지, Prettier는 포맷을 담당한다.
  • 두 도구의 충돌은 eslint-config-prettier로 해결할 수 있다.
  • 새로운 프로젝트에서는 lint-staged를 활용해 커밋 단계에서 자동 포맷을 적용했다.
  • Tailwind 프로젝트 특성을 고려해 prettier-plugin-tailwindcss를 함께 사용했다.
  • format 스크립트는 선택사항이며, CI 검사가 필요하거나 전체 코드를 한 번에 정리할 때 유용하다.