Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

4.1 KiB

Raw Blame History

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

title

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.

매 응용

매 monorepo 의 unified formatting.
CI 의 --check mode — 매 format violation 의 fail.
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 정리

4.1 KiB Raw Blame History