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

eslint-config-prettier

매 한 줄

"매 ESLint stylistic rule 을 모두 off". 매 Prettier 와 충돌하는 ESLint built-in/plugin rule 을 비활성화 — 매 두 tool 이 같은 줄을 두고 다투지 않게. 2026 ESLint 9 flat config 의 표준 prelude.

매 핵심

매 동작 원리

• 매 단일 module export — flat config array 의 마지막 entry 로 spread.
• 매 Prettier 가 처리하는 styling rule (indent, quotes, comma-dangle, semi, max-len, …) 의 0 (off) 설정.
• Logic-only ESLint rule (no-unused-vars, no-undef, hooks, accessibility) 는 그대로 유지.

매 작동 layer

1. ESLint 의 base stylistic rules off.
2. @typescript-eslint stylistic rules off.
3. eslint-plugin-react, vue, unicorn, import 의 stylistic part off.
4. Logic rule 은 절대 손대지 않음.

매 응용

1. 매 새 project 의 ESLint flat config 마지막에 prettierConfig spread.
2. 매 legacy .eslintrc.json 의 extends 마지막에 "prettier".
3. Verify with eslint-config-prettier CLI: 매 leftover 충돌 detect.

💻 패턴

Flat config (ESLint 9, 2026 표준)

// eslint.config.js
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  react.configs.flat.recommended,
  prettier, // MUST be last — turns off conflicting stylistic rules
];

Legacy .eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier"
  ]
}

CLI verification

# Detect rules that still conflict with Prettier
npx eslint-config-prettier path/to/file.ts

Order matters (last wins)

export default [
  js.configs.recommended,
  prettier,                  // ❌ 매 너무 일찍
  tseslint.configs.strict,   // tseslint stylistic 다시 켜짐
];
// ✅ 올바른 순서
export default [
  js.configs.recommended,
  tseslint.configs.strict,
  prettier, // last
];

Custom override (Prettier 와 같이 가는 dev rule)

export default [
  js.configs.recommended,
  prettier,
  {
    rules: {
      // logic — Prettier 와 무관 — 매 keep
      '@typescript-eslint/no-unused-vars': 'error',
      'react-hooks/exhaustive-deps': 'warn',
    },
  },
];

매 결정 기준

상황	Approach
Prettier + ESLint 같이 사용	항상 eslint-config-prettier 적용
ESLint stylistic rule 만 사용 (Prettier X)	미적용
Stylelint 와 결합	stylelint-config-prettier 도 함께 (2026 deprecated, Prettier 3 자체 처리)

기본값: 매 Prettier 사용하는 project 의 flat config 마지막 entry 로 항상 포함.

🔗 Graph

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

🤖 LLM 활용

언제: 매 ESLint 와 Prettier 를 함께 사용하는 모든 project — 매 default 로 적용. 언제 X: ESLint 만 사용 / Prettier 가 아닌 dprint 등 다른 formatter 사용 시.

❌ 안티패턴

• flat config 중간에 spread: 뒤에 오는 stylistic preset 이 다시 켬 → 충돌.
• eslint-plugin-prettier 만 사용 + config 미적용: ESLint stylistic 과 Prettier 가 무한 fight.
• Logic rule 도 같이 끄려는 fork: 매 의도된 logic warning 사라짐. config 의 의도는 stylistic only.

🧪 검증 / 중복

• Verified (eslint-config-prettier v9.x README, ESLint 9 flat config migration guide).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — full content with flat config order + CLI verification