2nd/10_Wiki/Topics/DevOps_and_Security/eslint-config-prettier.md

---
id: wiki-2026-0508-eslint-config-prettier
title: eslint-config-prettier
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [eslint config prettier, prettier-eslint-config]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [eslint, prettier, formatting, devops]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: javascript
  framework: 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 표준)
```js
// 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`
```json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier"
  ]
}
```

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

### Order matters (last wins)
```js
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)
```js
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|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 |