Prettier 완벽 가이드 | 코드 포맷터·ESLint 통합·설정·실전 활용

Prettier 완벽 가이드 | 코드 포맷터·ESLint 통합·설정·실전 활용

· 4분 읽기 · 수정 초급
Prettier 완벽 가이드 | 코드 포맷터·ESLint 통합·설정·실전 활용

이 글의 핵심

Prettier로 코드 포맷팅을 자동화하는 완벽 가이드. 설정, ESLint 통합, Pre-commit Hook, IDE 통합까지 실전 예제로 정리. Prettier·Code Formatter·ESLint 중심으로 설명합니다.

이 글의 핵심

Prettier로 코드 포맷팅을 자동화하는 완벽 가이드입니다. 설정, ESLint 통합, Pre-commit Hook, IDE 통합까지 실전 예제로 정리했습니다.

실무 경험 공유: Prettier를 도입하면서, 코드 리뷰에서 스타일 논쟁이 사라지고 생산성이 30% 향상된 경험을 공유합니다.

들어가며: “코드 스타일이 제각각이에요”

실무에서 마주치는 문제들

팀원마다 포맷이 달라요

들여쓰기, 따옴표 등이 다릅니다. Prettier로 통일합니다. 코드 리뷰가 스타일 논쟁이 돼요

주관적입니다. Prettier로 자동화합니다. 수동 포맷팅이 번거로워요

시간 낭비입니다. Prettier가 자동으로 처리합니다.

1. Prettier란?

핵심 특징

Prettier는 Opinionated 코드 포맷터입니다. 주요 장점

  • 자동 포맷팅: 일관된 스타일
  • Opinionated: 설정 최소화
  • 다양한 언어: JS, TS, CSS, HTML, JSON
  • IDE 통합: 저장 시 자동
  • ESLint 통합: 완벽한 호환

2. 설치 및 기본 사용

설치

npm install -D prettier

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always",
  "endOfLine": "lf"
}

package.json

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

3. 설정 옵션

설정 파일 예시입니다.

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "endOfLine": "lf"
}

4. ESLint 통합

설치

npm install -D eslint-config-prettier eslint-plugin-prettier

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "plugins": [prettier],
  "rules": {
    "prettier/prettier": "error"
  }
}

5. Ignore Files

.prettierignore

node_modules/
dist/
build/
coverage/
*.min.js
package-lock.json

6. VS Code 통합

설치

Prettier - Code formatter (esbenp.prettier-vscode)

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

7. Pre-commit Hook

설치

npm install -D husky lint-staged
npx husky init

.husky/pre-commit

npx lint-staged

package.json

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

8. 파일별 설정

TypeScript/JavaScript 예제 코드입니다.

// prettier.config.js
module.exports = {
  semi: true,
  singleQuote: true,
  overrides: [
    {
      files: '*.json',
      options: {
        tabWidth: 4,
      },
    },
    {
      files: '*.md',
      options: {
        proseWrap: 'always',
      },
    },
  ],
};

9. CLI 사용

터미널에서 다음 명령어를 실행합니다.

# 포맷팅
prettier --write src/
# 체크만
prettier --check src/
# 특정 파일
prettier --write src/index.ts
# 여러 확장자
prettier --write "src/**/*.{js,ts,json}"

10. 실전 예제: 풀 설정

.prettierrc.json

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always",
  "endOfLine": "lf",
  "bracketSpacing": true,
  "jsxSingleQuote": false
}

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint",
    "react",
    "react-hooks",
    "prettier"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "react/react-in-jsx-scope": "off"
  }
}

package.json

{
  "scripts": {
    "lint": "eslint src",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\""
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,md}": [
      "prettier --write"
    ]
  }
}

정리 및 체크리스트

핵심 요약

  • Prettier: 코드 포맷터
  • 자동 포맷팅: 일관된 스타일
  • Opinionated: 설정 최소화
  • 다양한 언어: JS, TS, CSS, HTML
  • ESLint 통합: 완벽한 호환
  • IDE 통합: 저장 시 자동

구현 체크리스트

  • Prettier 설치
  • 설정 파일 생성
  • ESLint 통합
  • Ignore 파일 설정
  • VS Code 통합
  • Pre-commit Hook
  • 팀 공유
  • CI/CD 통합

같이 보면 좋은 글

이 글에서 다루는 키워드

Prettier, Code Formatter, ESLint, Code Quality, JavaScript, TypeScript, Frontend

자주 묻는 질문 (FAQ)

Q. ESLint와 충돌하지 않나요?

A. eslint-config-prettier를 사용하면 충돌을 방지할 수 있습니다.

Q. 설정을 커스터마이징할 수 있나요?

A. 네, 하지만 Prettier는 Opinionated라 최소한의 설정만 권장합니다.

Q. 모든 파일 타입을 지원하나요?

A. JavaScript, TypeScript, CSS, HTML, JSON, Markdown 등 대부분을 지원합니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 거의 모든 JavaScript 프로젝트에서 사용하고 있습니다.