2nd/10_Wiki/Topic_Programming/DevOps_and_Security/eslint-plugin-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-eslint-plugin-prettier	eslint-plugin-prettier	10_Wiki/Topics	verified	self	eslint plugin prettier prettier-plugin	none	A	0.9	applied	eslint prettier formatting lint devops		2026-05-10	pending	language framework javascript eslint

eslint-plugin-prettier

매 한 줄

"매 Prettier 의 formatting 결과를 ESLint rule 로 노출". 매 Prettier 가 보는 차이를 lint error 로 reporting — 매 같은 IDE/CI 에서 lint 와 format 을 한 흐름으로. 2026 현재는 eslint --fix integration 보다 flat config + Prettier 3 + format-only on save 가 권장.

매 핵심

매 동작 원리

• eslint-plugin-prettier 는 Prettier 를 ESLint rule 처럼 실행 — file 의 expected output 과 actual content 를 비교해 diff 를 lint error 로 보고.
• Rule key: prettier/prettier — --fix 시 Prettier 가 직접 rewrite.
• 항상 eslint-config-prettier 와 함께 사용 (ESLint 의 stylistic rules off).

매 2026 권장 stack

• Format: Prettier 3.x — IDE save 또는 git pre-commit hook 에서 직접 실행.
• Lint: ESLint 9 flat config — 매 logic / type-aware rules.
• 결합: eslint-config-prettier 만 적용 (rule conflict off). eslint-plugin-prettier 는 선택 — CI 에서만 사용 권장.

매 응용

1. Monorepo CI 에서 eslint --max-warnings=0 으로 format drift 감지.
2. Pre-commit lint-staged 와 결합해 staged file 만 빠르게 검사.
3. Editor 가 Prettier 미설치인 contributor 의 PR 에서 catch.

💻 패턴

Flat config (ESLint 9 + Prettier 3, 2026 표준)

// eslint.config.js
import prettierPlugin from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';
import js from '@eslint/js';

export default [
  js.configs.recommended,
  prettierConfig, // turns off conflicting rules
  {
    plugins: { prettier: prettierPlugin },
    rules: {
      'prettier/prettier': ['error', { singleQuote: true, semi: true }],
    },
  },
];

Recommended preset

import prettierRecommended from 'eslint-plugin-prettier/recommended';

export default [
  prettierRecommended, // includes plugin + config + rule
];

Pre-commit (lint-staged + husky)

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

CI gate

# .github/workflows/lint.yml
- run: pnpm prettier --check .
- run: pnpm eslint .

Programmatic check

import { ESLint } from 'eslint';

const eslint = new ESLint({ fix: false });
const results = await eslint.lintFiles(['src/**/*.ts']);
const formatter = await eslint.loadFormatter('stylish');
console.log(formatter.format(results));

매 결정 기준

상황	Approach
매 contributor 가 Prettier 셋업 보장 안 됨	eslint-plugin-prettier 도입 → CI gate
매 모두 IDE save-on-format + pre-commit	plugin 없이 prettier --check 만
Monorepo + 다양한 language	Prettier CLI 직접 + plugin 생략 (속도 ↑)
Editor lint = error 표시가 필요	plugin 활성

기본값: eslint-config-prettier 만 사용 + Prettier 는 별도 실행. plugin 은 형식 drift 감지용 CI 에서 한정 적용.

🔗 Graph

• 부모: ESLint · Prettier
• 변형: eslint-config-prettier
• 응용: lint-staged · husky · CI_CD_Pipeline
• Adjacent: Code-Quality · DevSecOps_Framework

🤖 LLM 활용

언제: 매 Prettier output 과 lint output 을 한 reporter 로 통합해야 할 때 — 특히 monorepo CI 에서. 언제 X: 매 small repo 이고 contributor 가 Prettier IDE plugin 사용. plugin 의 overhead (Prettier 를 매 lint 에서 invoke) 가 불필요.

❌ 안티패턴

• Stylistic ESLint rule 과 plugin 동시 사용: eslint-config-prettier 미적용 → 무한 충돌.
• --fix 의존 only: editor 가 fix 안 해주면 broken state 유지. Prettier 직접 실행이 빠르고 명확.
• Plugin 으로 모든 file 검사: 매 large repo 에서 ESLint+Prettier 동시 invoke 는 느림. lint-staged 로 scope.

🧪 검증 / 중복

• Verified (eslint-plugin-prettier README v5.x, Prettier 3 docs, ESLint 9 flat config docs).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — full content with flat config + 2026 권장 stack