---
id: wiki-2026-0508-ai와-기계에게-검열-맡기기-정적-분석-툴-eslint-p
title: 정적 분석 툴 (ESLint, Prettier)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [ESLint, Prettier, linter, formatter, static analysis tools]
duplicate_of: none
source_trust_level: B
confidence_score: 0.9
verification_status: applied
tags: [eslint, prettier, linter, formatter, static-analysis, ast, code-quality]
raw_sources: []
last_reinforced: 2026-05-09
github_commit: pending
tech_stack:
  language: TypeScript / JavaScript
  framework: ESLint / Prettier / Biome
---

# 정적 분석 툴 (ESLint + Prettier)

## 📌 한 줄 통찰
> **"매 subjective code review → deterministic tool"**. Linter (ESLint) = bug + style. Formatter (Prettier) = visual. 매 PR 의 mechanical 의 AI / tool, 매 logic 의 human.

## 📖 핵심

### Linter vs Formatter

#### Linter (ESLint)
- 매 AST 의 analysis.
- 매 logic 의 problem.
- Configurable rule.
- Auto-fix subset.

#### Formatter (Prettier)
- 매 visual layout (indent, line break).
- 매 opinionated (no config debate).
- Always auto-fix.

→ 매 different concern. 매 둘 다 사용.

### ESLint 의 핵심
- 매 rule (built-in + plugin).
- 매 severity (error / warn / off).
- 매 file pattern (override).
- 매 plugin ecosystem 큰.

### Prettier 의 철학
- 매 minimal config.
- "End the debate".
- 매 language (JS, TS, CSS, HTML, MD, JSON).

### Modern alternative

#### Biome (Rust, ESLint + Prettier 의 통합)
- 빠름 (10x).
- 매 single tool.
- 매 ESLint plugin 의 support 부족.

#### Oxlint (Rust)
- 매 ESLint compatible.
- 50x faster.

#### Rome (deprecated)
- Biome 의 이름.

### 매 production setup

#### Pre-commit
- husky + lint-staged.
- 매 commit 의 lint + format.

#### CI
- 매 PR 의 lint 의 fail.
- 매 format check.

#### IDE
- VS Code 의 ESLint extension.
- 매 save 의 auto-fix.

### TypeScript + ESLint
- @typescript-eslint plugin.
- 매 type-aware rule.
- 매 import order.
- 매 unused export.

### Custom rule
- 매 team convention.
- 매 architectural pattern.
- 매 anti-pattern detect.

## 💻 Code

### .eslintrc.json
```json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "error",
    "react/jsx-key": "error"
  },
  "overrides": [
    { "files": ["*.test.ts"], "rules": { "no-console": "off" } }
  ]
}
```

### .prettierrc
```json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 100
}
```

### Pre-commit (husky + lint-staged)
```json
// package.json
{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{md,json}": ["prettier --write"]
  }
}
```

```bash
# .husky/pre-commit
#!/bin/sh
npx lint-staged
```

### CI workflow
```yaml
- run: npm run lint
- run: npm run format -- --check
- run: npm run typecheck
```

### Custom ESLint rule
```js
// eslint-rules/no-direct-db-import.js
module.exports = {
  meta: {
    type: 'problem',
    docs: { description: 'Direct DB import 의 ban from UI layer' },
  },
  create(context) {
    const filename = context.getFilename();
    if (!filename.includes('/components/')) return {};
    
    return {
      ImportDeclaration(node) {
        if (node.source.value.includes('@/db')) {
          context.report({
            node,
            message: 'UI 의 DB 직접 import X. Use service.',
          });
        }
      },
    };
  },
};
```

### Biome (modern alternative)
```bash
npm install -D @biomejs/biome
npx biome init
npx biome format --write .
npx biome lint .
```

### Auto-fix on save (VS Code)
```json
// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```

## 🤔 결정 기준

| 상황 | 추천 |
|---|---|
| 매 new project | ESLint + Prettier |
| 매 large monorepo | Biome (single tool, fast) |
| 매 React-heavy | ESLint + react plugin |
| 매 type-safe | + @typescript-eslint |
| 매 specific convention | Custom rule |
| 매 cross-language | Biome / Prettier |

**기본값**: ESLint + Prettier (separate). 매 large project 의 Biome 의 consider.

## 🔗 Graph
- 부모: [[Static-Analysis]] · [[Code-Quality]]
- 변형: [[Biome]] · [[Oxlint]] ·  (CSS) ·  (Python) ·  (Rust)
- 응용: [[AST]]
- Adjacent: [[AI_코드_리뷰]] · [[AI-Powered Code Analysis (Autofix + Triage)]]

## 🤖 LLM 활용
**언제**: 매 codebase quality 의 setup. 매 team convention 의 enforce.
**언제 X**: 매 throwaway script. 매 specific compliance audit.

## ❌ 안티패턴
- **Inconsistent rule (per-dev)**: drift.
- **No pre-commit hook**: 매 PR 의 매 lint fail.
- **ESLint + Prettier 의 conflict (rule overlap)**: eslint-config-prettier 의 사용.
- **No auto-fix on save**: manual cycle slow.
- **Custom rule 의 over-engineer**: 매 simple 의 readable 더 좋음.

## 🧪 검증 / 중복
- Verified (industry standard).
- 신뢰도 B.
- Related: [[AI_코드_리뷰]] · [[AI-Powered Code Analysis (Autofix + Triage)]] · [[AST]].

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-09 | Cleanup — ESLint + Prettier setup + Biome alternative + custom rule |