Previous
Next
Prettier Complete Guide | Opinionated Code Formatter

Prettier Complete Guide | Opinionated Code Formatter

· 18분 읽기 · 수정 beginner tutorial
Prettier Complete Guide | Opinionated Code Formatter

이 글의 핵심

Prettier is an opinionated code formatter that enforces consistent style. It supports JavaScript, TypeScript, CSS, HTML, JSON, and more with zero configuration.

Introduction

Prettier is an opinionated code formatter that removes all original styling and ensures consistent code style. It takes your code and reprints it according to its own rules.

Before Prettier

// Developer A
function   add(a,b){return a+b}

// Developer B
function add( a , b ) {
  return a + b
}

// Developer C
function add(a, b) { return a + b; }

After Prettier

// Everyone
function add(a, b) {
  return a + b;
}

1. Installation

npm install --save-dev prettier

Quick Start

# Format all files
npx prettier --write .

# Check formatting
npx prettier --check .

# Format specific files
npx prettier --write "src/**/*.{js,jsx,ts,tsx}"

2. Configuration

.prettierrc

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

.prettierignore

# .prettierignore
node_modules
dist
build
coverage
.next
.cache
*.min.js
package-lock.json
yarn.lock
pnpm-lock.yaml

3. IDE Integration

VS Code

# Install extension
code --install-extension esbenp.prettier-vscode

settings.json:

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

WebStorm

Settings → Languages & Frameworks → JavaScript → Prettier

  • ✅ Enable “On save”
  • ✅ Enable “On code reformat”

4. Pre-commit Hook

With Husky + lint-staged

npm install --save-dev husky lint-staged
npx husky init

package.json:

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

.husky/pre-commit:

npx lint-staged

Now Prettier runs automatically before commit!

5. ESLint Integration

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

.eslintrc.json:

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

Now ESLint shows Prettier errors!

6. Configuration Options

{
  "printWidth": 80,              // Line length
  "tabWidth": 2,                 // Spaces per tab
  "useTabs": false,              // Use spaces, not tabs
  "semi": true,                  // Add semicolons
  "singleQuote": true,           // Use single quotes
  "quoteProps": "as-needed",     // Quote object keys only when needed
  "jsxSingleQuote": false,       // Use double quotes in JSX
  "trailingComma": "es5",        // Trailing commas where valid in ES5
  "bracketSpacing": true,        // Spaces in object literals
  "bracketSameLine": false,      // JSX bracket on next line
  "arrowParens": "always",       // Always parens around arrow function args
  "endOfLine": "lf"              // Unix line endings
}
{
  "singleQuote": true,
  "trailingComma": "es5"
}

Let Prettier handle the rest!

7. Language Support

Prettier supports many languages:

prettier --write "**/*.{js,jsx,ts,tsx,json,css,scss,md,html,yaml,yml}"

JavaScript/TypeScript

// Before
const obj={a:1,b:2,c:3};

// After
const obj = { a: 1, b: 2, c: 3 };

React/JSX

// Before
<Button onClick={()=>console.log('clicked')} disabled={true} />

// After
<Button onClick={() => console.log('clicked')} disabled />

CSS

/* Before */
.button{background:blue;color:white}

/* After */
.button {
  background: blue;
  color: white;
}

JSON

{"name":"my-app","version":"1.0.0","dependencies":{"react":"^18.0.0"}}
{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0"
  }
}

8. CI/CD Integration

GitHub Actions

name: Format Check

on: [push, pull_request]

jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npx prettier --check .

Auto-fix on PR

- name: Run Prettier
  run: |
    npx prettier --write .
    git config user.name github-actions
    git config user.email [email protected]
    git add .
    git diff --quiet && git diff --staged --quiet || git commit -m "style: format code with Prettier"
    git push

9. Team Workflow

1. Add to Project

npm install --save-dev prettier

2. Create Config

// .prettierrc
{
  "singleQuote": true,
  "trailingComma": "es5"
}

3. Format Everything

npx prettier --write .
git add .
git commit -m "style: format codebase with Prettier"

4. Setup Pre-commit Hook

npm install --save-dev husky lint-staged
npx husky init

5. Add to CI

# .github/workflows/format.yml
- run: npx prettier --check .

10. Best Practices

1. Minimal Configuration

{
  "singleQuote": true
}

Trust Prettier’s defaults!

2. Format on Save

Enable in your IDE for instant feedback.

3. Use with ESLint

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

4. Ignore Generated Files

# .prettierignore
dist/
build/
*.min.js

11. Common Issues

Problem: Conflicts with ESLint

Solution: Use eslint-config-prettier

npm install --save-dev eslint-config-prettier
{
  "extends": ["eslint:recommended", "prettier"]
}

Problem: Different formatting in CI vs local

Solution: Pin Prettier version

{
  "devDependencies": {
    "prettier": "3.2.5"
  }
}

Summary

Prettier eliminates code style debates:

  • Opinionated - minimal configuration
  • Consistent - same output every time
  • Fast - formats entire codebase in seconds
  • Multi-language - JS, TS, CSS, HTML, and more
  • Editor integration for all major IDEs

Key Takeaways:

  1. Zero config code formatting
  2. Integrates with ESLint
  3. Use pre-commit hooks
  4. Format on save in IDE
  5. Enforces team consistency

Next Steps:

  • Setup [ESLint](/en/blog/eslint-complete-guide/
  • Try [Biome](/en/blog/biome-complete-guide/
  • Learn [TypeScript](/en/blog/typescript-complete-guide/

Resources:

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. Complete Prettier guide for code formatting. Learn configuration, IDE integration, pre-commit hooks, and team workflow f… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

  • [Biome Complete Guide](/en/blog/biome-complete-guide/
  • [VS Code Productivity Extensions](/en/blog/vscode-productivity-extensions/
  • [Complete Babel Complete Guide | JavaScript Transpiler](/en/blog/babel-complete-guide/

이 글에서 다루는 키워드 (관련 검색어)

Prettier, Code Formatting, JavaScript, TypeScript, Developer Tools, ESLint 등으로 검색하시면 이 글이 도움이 됩니다.