typescript-eslint

typescript-eslint - クイックリファレンス

このスキルを使用する場面

• TypeScript プロジェクト向けに ESLint を設定する
• TypeScript の型を考慮したルールを使う
• TSLint から移行する

このスキルを使用しない場面

• ESLint 9 の完全なセットアップ - 完全な設定には eslint-biome スキルを使用します
• Biome リンター - Biome のセットアップには eslint-biome スキルを使用します
• コード品質の原則 - SOLID／クリーンコードには quality-common を使用します
• Java／Kotlin - JVM 言語には sonarqube スキルを使用します

詳細な知識：包括的なドキュメントを参照するには、テクノロジーに typescript-eslint を指定して mcp__documentation__fetch_docs を使用します。

基本的なセットアップ

npm install -D eslint typescript-eslint

フラット設定（ESLint 9 以降）

eslint.config.mjs

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

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

型を考慮したリント

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,
      },
    },
  },
);

厳格な設定

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

よく使うルール

{
  rules: {
    // Prevent unused variables
    '@typescript-eslint/no-unused-vars': ['error', {
      argsIgnorePattern: '^_'
    }],

    // Require explicit return types
    '@typescript-eslint/explicit-function-return-type': 'warn',

    // Prevent any usage
    '@typescript-eslint/no-explicit-any': 'error',

    // Require await in async functions
    '@typescript-eslint/require-await': 'error',

    // Prevent floating promises
    '@typescript-eslint/no-floating-promises': 'error',

    // Consistent type imports
    '@typescript-eslint/consistent-type-imports': 'error',
  }
}

ファイル固有のルール

export default tseslint.config(
  // ... base config
  {
    files: ['**/*.test.ts', '**/*.spec.ts'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
  {
    files: ['**/*.js'],
    ...tseslint.configs.disableTypeChecked,
  },
);

アンチパターン

アンチパターン	問題点	正しいアプローチ
型を考慮したルールを使わない	Promise や async の問題を見逃します	recommendedTypeChecked を使用します
どこでも any を許可する	TypeScript を使う目的が損なわれます	no-explicit-any: error を設定します
require-await ルールがない	不要な async キーワードが使われます	型を考慮した async ルールを有効にします
JavaScript ファイルを型チェックする	JavaScript には型がありません	.js には disableTypeChecked を使用します
テストファイルでルールを無効にする	テストにも品質が必要です	必要な場合に限り no-explicit-any を無効にします
未使用の変数を無視する	コードの臭い、未使用のインポートが発生します	無視パターンを指定して no-unused-vars を使用します

簡単なトラブルシューティング

問題	考えられる原因	解決策
型を考慮したルールが動作しない	projectService: true が指定されていません	languageOptions.parserOptions に追加します
リントが非常に遅い	すべてのファイルを型チェックしています	型ルールの対象を **/*.ts のみに限定します
あらゆる場所で「Unsafe」エラーが発生する	厳格な型チェック	strictTypeChecked を使用するか、特定のルールを無効にします
Promise のエラーが検出されない	no-floating-promises がありません	recommendedTypeChecked プリセットで有効にします
未使用のインポートが検出されない	ルールの設定が誤っています	@typescript-eslint/no-unused-vars を使用します
ルールが Prettier と競合する	両方がコードをフォーマットしています	最後に eslint-config-prettier を追加します