2nd/10_Wiki/Topics/Backend/ESLint.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-eslint	ESLint	10_Wiki/Topics	verified	self	ESLint Flat Config eslint.config.js	none	A	0.9	applied	javascript typescript lint tooling ast		2026-05-10	pending	language framework JavaScript/TypeScript 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)

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

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

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

npx eslint . --fix --max-warnings=0 --cache --cache-location=.eslintcache

Pre-commit (lint-staged)

{
  "lint-staged": {
    "*.{ts,tsx,js}": ["eslint --fix --max-warnings=0", "prettier --write"]
  }
}

typescript-eslint 의 type-aware

{
  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 정리