2nd/10_Wiki/Topics/Frontend/Es-Lint-Configuration.md

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

# ESLint Configuration

## 매 한 줄
> **"매 ESLint v9+ flat config (`eslint.config.js`) 는 array-of-config-objects 의 explicit composition"**. Legacy `.eslintrc.*` 의 deprecated. 매 modern setup 의 typescript-eslint, prettier integration, framework presets (Next, React) 의 mix.

## 매 핵심

### 매 Flat Config (v9+)
- Single `eslint.config.js` (or `.mjs`) at project root.
- Exports array; each entry: `{ files, ignores, languageOptions, plugins, rules, ... }`.
- No `extends` — use `...config` spread.
- No `env` — use `globals` from `globals` package.

### 매 Core Concepts
- **languageOptions**: parser, parserOptions, globals.
- **plugins**: object map (`{ pluginName: pluginObject }`).
- **rules**: 'off' / 'warn' / 'error' (or 0/1/2), with config tuple `['error', opts]`.
- **files**: glob array (e.g. `['**/*.ts']`) — scope rules.
- **ignores**: replaces `.eslintignore`.

### 매 응용
1. TypeScript project linting (typescript-eslint).
2. React/Next.js framework rules.
3. Monorepo per-package overrides.
4. Prettier integration (eslint-config-prettier).

## 💻 패턴

### Minimal Modern Config
```js
// eslint.config.js (ESM)
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import globals from 'globals';

export default [
  { ignores: ['dist/**', 'node_modules/**', '.next/**'] },
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2024,
      sourceType: 'module',
      globals: { ...globals.browser, ...globals.node },
    },
    rules: {
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    },
  },
];
```

### React + TypeScript
```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 jsxA11y from 'eslint-plugin-jsx-a11y';

export default [
  js.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parserOptions: { project: './tsconfig.json' },
    },
    plugins: { react, 'react-hooks': reactHooks, 'jsx-a11y': jsxA11y },
    settings: { react: { version: 'detect' } },
    rules: {
      ...react.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'react/react-in-jsx-scope': 'off',  // not needed in React 17+
      'react/prop-types': 'off',          // TS handles this
    },
  },
];
```

### Next.js (15+)
```js
import next from '@next/eslint-plugin-next';

export default [
  // ... base configs
  {
    plugins: { '@next/next': next },
    rules: {
      ...next.configs.recommended.rules,
      ...next.configs['core-web-vitals'].rules,
    },
  },
];
```

### Prettier Integration
```bash
npm i -D eslint-config-prettier
```
```js
import prettier from 'eslint-config-prettier';

export default [
  // ... your configs
  prettier,  // MUST be last — disables ESLint formatting rules
];
```

### Per-File Overrides
```js
export default [
  // base
  {
    files: ['**/*.test.{ts,tsx}'],
    languageOptions: { globals: { ...globals.jest } },
    rules: { '@typescript-eslint/no-explicit-any': 'off' },
  },
  {
    files: ['scripts/**/*.js'],
    languageOptions: { sourceType: 'commonjs' },
  },
];
```

### Type-Aware Rules
```js
{
  files: ['**/*.{ts,tsx}'],
  languageOptions: {
    parser: tseslint.parser,
    parserOptions: {
      project: true,         // auto-find nearest tsconfig
      tsconfigRootDir: import.meta.dirname,
    },
  },
  rules: {
    '@typescript-eslint/no-floating-promises': 'error',
    '@typescript-eslint/await-thenable': 'error',
  },
}
```

### package.json Scripts
```json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "lint:cache": "eslint . --cache --cache-location .cache/eslint"
  }
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| New project (2026) | Flat config (v9+) |
| Legacy `.eslintrc` | Migrate via `@eslint/migrate-config` |
| Formatting | Prettier; eslint-config-prettier last |
| Type-aware rules | parserOptions.project: true |
| Monorepo | Root config + per-package overrides via files glob |

**기본값**: flat config + typescript-eslint recommended-type-checked + Prettier integration.

## 🔗 Graph
- 부모: [[ESLint]] · [[Code Quality]]
- 변형: [[Biome]] (alternative) · [[oxlint]] (alternative)
- 응용: [[153_pre-commit과_품질_게이트|Pre-commit Hooks]]
- Adjacent: [[Prettier]] · [[Husky]]

## 🤖 LLM 활용
**언제**: ESLint setup, rule conflict 의 debug, flat config migration.
**언제 X**: extreme performance — Biome / oxlint 의 consider.

## ❌ 안티패턴
- **`.eslintrc.*` in v9+**: deprecated, no longer auto-loaded.
- **Prettier as ESLint plugin (`eslint-plugin-prettier`)**: slow, conflict-prone. Use Prettier separately + eslint-config-prettier.
- **`extends` in flat config**: doesn't exist; use spread.
- **Global rules without `files` scope in monorepo**: lints unintended files.
- **Disabling whole categories**: targeted overrides 의 prefer.

## 🧪 검증 / 중복
- Verified (eslint.org docs — flat config, typescript-eslint v8 docs).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — ESLint flat config full content |