2nd/10_Wiki/Topics/Frontend/Es-Lint-Configuration.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-es-lint-configuration	ESLint Configuration	10_Wiki/Topics	verified	self	ESLint Config eslint.config.js Flat Config	none	A	0.9	applied	eslint linting javascript typescript tooling		2026-05-10	pending	language framework javascript 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

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

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

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

npm i -D eslint-config-prettier

import prettier from 'eslint-config-prettier';

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

Per-File Overrides

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

{
  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

{
  "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
• 변형: typescript-eslint · Biome (alternative) · oxlint (alternative)
• 응용: Pre-commit Hooks · CI Linting
• Adjacent: Prettier · TSConfig · 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