2nd/10_Wiki/Topics/Backend/ESLint.md

---
id: wiki-2026-0508-eslint
title: ESLint
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [ESLint Flat Config, eslint.config.js]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [javascript, typescript, lint, tooling, ast]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript/TypeScript
  framework: ESLint 9.x
---

# ESLint

## 매 한 줄
> **"매 JS/TS 의 pluggable AST-based linter"**. Nicholas Zakas 가 2013 시작 — 매 ESTree AST 의 traverse 후 매 rule 의 emit. 2024 v9 의 flat config (eslint.config.js) 의 default — 2026 매 typescript-eslint v8, Stylistic plugin, Biome 의 competition 안에서 매 still ecosystem default.

## 매 핵심

### 매 architecture
- **Parser**: source → ESTree AST (espree / `@typescript-eslint/parser` / hermes-parser).
- **Rule**: AST visitor — `Program`, `CallExpression` 의 listen, `context.report()` 의 emit.
- **Config (flat)**: array of objects — `files`, `languageOptions`, `plugins`, `rules`.
- **Fixer**: rule 의 autofix function — `--fix` 의 apply.

### 매 v9 flat config 의 핵심
- **One file**: `eslint.config.js` (or `.mjs`/`.ts`) — 매 root cascade 의 X.
- **Explicit imports**: 매 plugin/preset 의 `import` — magic string 의 X.
- **Layer override**: array order 의 last-wins.
- **`extends` 의 X**: 매 spread 의 use.

### 매 응용
1. CI gate (lint → typecheck → test).
2. Editor inline diagnostic (VSCode ESLint extension).
3. Pre-commit (lint-staged + husky).
4. Codemod (autofixable rule 의 batch refactor).

## 💻 패턴

### Flat config — TS + React (2026)
```js
// eslint.config.js
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import globals from 'globals';

export default [
  js.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parserOptions: { project: './tsconfig.json' },
      globals: { ...globals.browser },
    },
    plugins: { react, 'react-hooks': reactHooks },
    rules: {
      ...react.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'react/react-in-jsx-scope': 'off',
      '@typescript-eslint/no-floating-promises': 'error',
    },
    settings: { react: { version: 'detect' } },
  },
  { ignores: ['dist/**', 'coverage/**'] },
];
```

### Custom rule (no console.log in src)
```js
// rules/no-raw-console.js
export default {
  meta: { type: 'problem', fixable: 'code', schema: [] },
  create(context) {
    return {
      'CallExpression[callee.object.name="console"][callee.property.name="log"]'(node) {
        context.report({
          node,
          message: 'Use logger.info instead of console.log',
          fix: (fixer) => fixer.replaceText(node.callee, 'logger.info'),
        });
      },
    };
  },
};
```

### Autofix rule — sort imports
```js
create(context) {
  return {
    Program(node) {
      const imports = node.body.filter(n => n.type === 'ImportDeclaration');
      const sorted = [...imports].sort((a, b) =>
        a.source.value.localeCompare(b.source.value));
      if (imports.some((n, i) => n !== sorted[i])) {
        context.report({
          node: imports[0],
          message: 'Imports must be sorted',
          fix: (fixer) => fixer.replaceTextRange(
            [imports[0].range[0], imports.at(-1).range[1]],
            sorted.map(n => context.sourceCode.getText(n)).join('\n')),
        });
      }
    },
  };
}
```

### CLI + fix
```bash
npx eslint . --fix --max-warnings=0 --cache --cache-location=.eslintcache
```

### Pre-commit (lint-staged)
```json
{
  "lint-staged": {
    "*.{ts,tsx,js}": ["eslint --fix --max-warnings=0", "prettier --write"]
  }
}
```

### typescript-eslint 의 type-aware
```js
{
  languageOptions: {
    parserOptions: {
      projectService: true,           // 매 v8+ — auto tsconfig discovery
      tsconfigRootDir: import.meta.dirname,
    },
  },
  rules: {
    '@typescript-eslint/no-misused-promises': 'error',
    '@typescript-eslint/await-thenable': 'error',
  },
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| New project (2026) | Flat config + typescript-eslint v8 + projectService |
| Monorepo | per-package config 의 spread + root ignore |
| Speed-critical CI | Biome (formatter + lint) 의 partial replace 의 evaluate |
| Style rule | ESLint Stylistic plugin (Prettier 와 separate) |
| Editor experience | VSCode `eslint.useFlatConfig: true` |

**기본값**: flat config + typescript-eslint v8 + Stylistic + lint-staged.

## 🔗 Graph
- 부모: [[Static Analysis]]
- 변형: [[Biome]] · [[Oxlint]]
- 응용: [[lint-staged]] · [[husky]]
- Adjacent: [[Prettier]]

## 🤖 LLM 활용
**언제**: rule lookup, flat config 의 migrate, custom rule scaffolding, AST selector 의 craft.
**언제 X**: 매 specific plugin 의 latest API — version churn 매 빠름, docs 의 cross-check.

## ❌ 안티패턴
- **`.eslintrc` 의 still 의 use (2026)**: v9 의 deprecate — flat config 의 migrate.
- **Prettier rule 의 ESLint 안에서 enforce**: 매 conflict — separate run.
- **`extends` chaining of unrelated configs**: 매 cascade 의 의 hard to debug — explicit imports 의 use.
- **No `--cache`**: 매 large repo 의 slow — `.eslintcache` 의 enable.
- **type-aware rule 의 large monorepo 의 enable**: parser overhead — 매 critical 의 만.

## 🧪 검증 / 중복
- Verified (eslint.org docs v9; typescript-eslint.io v8; ESLint blog 2024-04 flat config GA).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — flat config + typescript-eslint v8 정리 |