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

2026년 4월 7일 · 14분 읽기 · 수정 2026년 4월 7일 초급

이 글의 핵심

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

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

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

실무 문제 시나리오

시나리오 1: 팀원마다 포맷이 달라요
들여쓰기, 따옴표 등이 다릅니다. Prettier로 통일합니다.

시나리오 2: 코드 리뷰가 스타일 논쟁이 돼요
주관적입니다. Prettier로 자동화합니다.

시나리오 3: 수동 포맷팅이 번거로워요
시간 낭비입니다. 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. 파일별 설정

// 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 통합: 저장 시 자동

구현 체크리스트

같이 보면 좋은 글

ESLint 완벽 가이드
TypeScript 완벽 가이드
Husky 가이드

이 글에서 다루는 키워드

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 프로젝트에서 사용하고 있습니다.