ESLint + TypeScript — typescript-eslint 규칙과 타입 인지 린팅

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

// eslint.config.mjs
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
);

// eslint.config.mjs
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
);

// @typescript-eslint/no-unused-vars
// ❌ 사용하지 않는 변수
const unused = 42; // Error

// ✅ 언더스코어 접두사는 허용 (관례)
const _unused = 42; // OK

// ✅ 구조 분해에서 나머지만 사용
const { used, ...rest } = obj; // rest만 사용해도 OK

// @typescript-eslint/no-explicit-any
// ❌ 명시적 any 사용 금지
function parse(data: any) {} // Error

// ✅ unknown 사용
function parse(data: unknown) {} // OK

// @typescript-eslint/consistent-type-imports
// ❌ 일반 import로 타입 가져오기
import { User } from './types';

// ✅ 타입 전용 import 명시
import type { User } from './types';

// @typescript-eslint/no-floating-promises
// ❌ Promise를 처리하지 않음
async function fetchData() { /* ... */ }
fetchData(); // Error: Promise가 처리되지 않음

// ✅ await 또는 .then()으로 처리
await fetchData();
// 또는
fetchData().catch(console.error);
// 또는 의도적으로 무시할 때
void fetchData();

// @typescript-eslint/no-misused-promises
// ❌ async 함수를 boolean 위치에 사용
const isValid = async () => { /* ... */ };
if (isValid()) { /* ... */ } // Error: Promise는 항상 truthy

// ❌ 이벤트 핸들러에 async 함수 전달 (void 반환이어야 함)
// <button onClick={async () => { await save(); }}>저장</button>

// @typescript-eslint/await-thenable
// ❌ Promise가 아닌 값을 await
const value = 42;
const result = await value; // Error: 42는 thenable이 아님

// ✅ Promise만 await
const result2 = await Promise.resolve(42); // OK

// @typescript-eslint/no-unsafe-assignment
// ❌ any 타입 값 할당
const data: any = getExternalData();
const name = data.user.name; // Error: any 전파

// ✅ unknown으로 받고 타입 좁히기
const data2: unknown = getExternalData();
if (isUser(data2)) {
  const name = data2.name; // OK
}

// eslint.config.mjs — 실무 추천
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.strictTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      // 프로젝트에 맞게 조정
      '@typescript-eslint/no-unused-vars': ['error', {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      }],
      '@typescript-eslint/consistent-type-imports': 'error',
      '@typescript-eslint/no-floating-promises': 'error',
    },
  },
);

// 대규모 프로젝트에서 성능 최적화
{
  "parserOptions": {
    "projectService": true,  // project보다 빠른 새 옵션
    "tsconfigRootDir": "."
  }
}