2nd/10_Wiki/Topics/Domain_Programming/DevOps_and_Security/Prettier.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-prettier	Prettier	10_Wiki/Topics	verified	self	Prettier Formatter Code Formatter	none	A	0.9	applied	tooling formatter javascript typescript		2026-05-10	pending	language framework JavaScript/TypeScript Prettier

Prettier

매 한 줄

"매 opinionated formatter — 매 bikeshed 종결자". Prettier 매 AST re-print 방식 사용 — 매 source 의 whitespace 무시 의 deterministic output 생성. 2026 매 v3.x 의 ESM-first + plugin ecosystem 안정화.

매 핵심

매 Re-print 방식

• 매 parser 의 source → AST 변환.
• 매 printer 의 AST → IR (Doc) 생성.
• 매 IR 의 line-width constraint 기반 layout 결정.
• 매 original whitespace 의 X 보존.

매 ESLint 와의 분리

• ESLint: 매 code quality (logic, anti-patterns).
• Prettier: 매 formatting (whitespace, quote, line-break).
• 매 eslint-config-prettier 의 conflict rule disable.

매 응용

1. 매 monorepo 의 unified formatting.
2. CI 의 --check mode — 매 format violation 의 fail.
3. Pre-commit hook (lint-staged + husky) 의 auto-format.

💻 패턴

Config 의 minimal .prettierrc

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

CLI 의 batch format

# Format in place
npx prettier --write "src/**/*.{ts,tsx,js,jsx,json,md}"

# CI check
npx prettier --check "src/**/*.{ts,tsx}"

lint-staged 의 staged-only format

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

Plugin 의 ordering — prettier-plugin-tailwindcss

{
  "plugins": ["prettier-plugin-tailwindcss"]
}
// Tailwind class 의 자동 ordering — flex p-4 m-2 → m-2 p-4 flex

Programmatic API (v3 ESM)

import prettier from "prettier";

const formatted = await prettier.format(sourceCode, {
  parser: "typescript",
  semi: false,
  singleQuote: true,
});

Editor integration — VSCode

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

Override 의 file-type 별 config

{
  "semi": true,
  "overrides": [
    { "files": "*.md", "options": { "proseWrap": "always", "printWidth": 80 } },
    { "files": "*.yml", "options": { "tabWidth": 2 } }
  ]
}

매 결정 기준

상황	Approach
Solo project	Prettier defaults — 매 zero config.
Team — strict	.prettierrc commit + CI check.
Tailwind 사용	prettier-plugin-tailwindcss 필수.
Legacy codebase	매 한 번 --write + 매 .git-blame-ignore-revs 추가.
Monorepo	Root .prettierrc + workspace override.

기본값: singleQuote: true, trailingComma: "all", printWidth: 100, format-on-save + pre-commit hook.

🔗 Graph

• 부모: Code Formatting
• 변형: ESLint · Biome
• 응용: 153_pre-commit과_품질_게이트 · lint-staged
• Adjacent: AST · TypeScript

🤖 LLM 활용

언제: JS/TS/JSON/MD/YAML/CSS — 매 multi-language project 의 unified formatting. 언제 X: 매 Rust/Go (rustfmt/gofmt 의 사용), 매 single-language Rust-only 의 Biome 고려.

❌ 안티패턴

• ESLint 의 stylistic rules + Prettier 동시 사용: 매 conflict 발생 → eslint-config-prettier 적용.
• .prettierrc 의 commit X: 매 team 의 inconsistent format.
• Format-on-save 의 X + manual format: 매 review noise 증가.
• 매 large initial format 의 main branch 직접 commit: blame 의 손상 — 매 .git-blame-ignore-revs 사용.

🧪 검증 / 중복

• Verified (Prettier docs v3.x).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Prettier 매 re-print formatter + config patterns 정리