2nd/10_Wiki/Topics/AI_and_ML/AI와 기계에게 검열 맡기기_ - 정적 분석 툴 (ESLint 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-ai와-기계에게-검열-맡기기-정적-분석-툴-eslint-p	정적 분석 툴 (ESLint, Prettier)	10_Wiki/Topics	verified	self	ESLint Prettier linter formatter static analysis tools	none	B	0.9	applied	eslint prettier linter formatter static-analysis ast code-quality		2026-05-09	pending	language framework TypeScript / JavaScript 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

{
  "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

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 100
}

Pre-commit (husky + lint-staged)

// package.json
{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{md,json}": ["prettier --write"]
  }
}

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

CI workflow

- run: npm run lint
- run: npm run format -- --check
- run: npm run typecheck

Custom ESLint rule

// 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)

npm install -D @biomejs/biome
npx biome init
npx biome format --write .
npx biome lint .

Auto-fix on save (VS Code)

// .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 · StyleLint (CSS) · Pylint (Python) · clippy (Rust)
• 응용: AST · Pre-commit-Hook · CI-Quality-Gate
• Adjacent: AI-Code-Review · AI-Powered-Code-Analysis

🤖 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-Code-Review · AI-Powered-Code-Analysis · AST.

🕓 Changelog

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