メインコンテンツへスキップ

型情報を使用したLint

いくつかの typescript-eslint ルールは、TypeScript の型チェック API の優れた能力を利用して、コードに関するはるかに深い洞察を提供します。TypeScript の追加の能力を活用するには、設定ファイルに 2 つの小さな変更を加える必要があります。

  1. 使用しているプリセット設定の名前（つまり、`recommended`、`strict`、`stylistic`）に `TypeChecked` を追加します。
  2. パーサーに各ソースファイルの TSConfig を見つける方法を伝えるために、`languageOptions.parserOptions` を追加します。
eslint.config.js
export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
);
注記

import.meta.dirname は、Node.js >=20.11.0 / >= 21.2.0 の ESM ファイルでのみ存在します。
CommonJS モジュールやそれより古いバージョンの Node.js の場合は、`__dirname` または代替手段を使用してください。

詳細

  • tseslint.configs.recommendedTypeChecked は、私たちが提供するもう 1 つの共有設定です。これは、型情報も必要とする推奨ルールが含まれています。
  • parserOptions.project: true は、各ソースファイルに最も近い tsconfig.json を検索することを示します（Parser#project を参照）。
  • parserOptions.tsconfigRootDir は、プロジェクトのルートディレクトリの絶対パスをパーサーに伝えます（Parser#tsconfigRootDir を参照）。
注意

ESLint 設定ファイルで、型情報に関する構文エラーが発生することがあります。TSConfig のインクルードに関する FAQ を参照してください。

これで完了したら、前に実行したのと同じ lint コマンドを実行します。型情報に基づいてエラーを報告する新しいルールが表示される場合があります。

共有設定​

前の手順で `strict` 共有設定 や `stylistic` 共有設定 を有効にした場合は、それらをそれぞれ `strictTypeChecked` と `stylisticTypeChecked` に置き換えて、型チェックされたルールを追加してください。

eslint.config.js
export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.strict,
  ...tseslint.configs.stylistic,
  ...tseslint.configs.strictTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,
  // ...
);

typescript-eslint によって提供されるルールについては、ルールのドキュメント と 共有設定のドキュメント で詳しく読むことができます。

よくある質問​

型付き lint に使用する TSConfig をカスタマイズできますか？​

`project` オプションは、次のようにして有効にできます。

  • `true`：ソースファイルに最も近い `tsconfig.json` を常に使用します。
  • `string | string[]`：`parserOptions.tsconfigRootDir` を基準とした、またはそれが提供されていない場合は現在の作業ディレクトリを基準とした、TSConfig ファイルに一致する任意の数の glob パス。

たとえば、lint に特定の `tsconfig.eslint.json` を使用する場合は、次のように指定します。

eslint.config.js
export default tseslint.config({
  // ...
  languageOptions: {
    parserOptions: {
      project: './tsconfig.eslint.json',
      tsconfigRootDir: import.meta.dirname,
    },
  },
  // ...
});

@typescript-eslint/parser ドキュメントの詳細を参照してください。

注記

プロジェクトがマルチパッケージモノレポの場合は、モノレポの設定に関するドキュメント を参照してください。

ファイルのサブセットに対して型認識 lint を無効にするにはどうすればよいですか？​

ESLint のoverrides 設定と、私たちの`disable-type-checked` 設定を組み合わせて、特定のファイルのサブセットで型認識 lint をオフにすることができます。

eslint.config.js
export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        project: true,
      },
    },
  },
  {
    files: ['**/*.js'],
    ...tseslint.configs.disableTypeChecked,
  },
);
情報

他のプラグインから型認識ルールを使用する場合は、これらのルールを手動で無効にするか、それらを無効にするために提供されている既製の構成を使用する必要があります。

パフォーマンスはどうですか？​

型付きルールには落とし穴があります。設定に `parserOptions.project` を含めることで、ESLint が lint を実行する前に TypeScript にプロジェクトのビルドを実行させるというパフォーマンス上のペナルティが発生します。小さなプロジェクトでは、これは無視できる程度の時間（数秒以内）かかりますが、大きなプロジェクトでは時間がかかる可能性があります。

多くのユーザーは、型認識静的解析ルールの機能と安全性はトレードオフの価値があると考えるため、このコストを気にしていません。さらに、ほとんどのユーザーは、主に IDE プラグインを介して lint エラーを使用しており、キャッシングによって同じペナルティを受けません。つまり、一般的に、彼らはプッシュ前、または CI を介して、追加の時間が問題にならない場合にのみ、完全な lint を実行する傾向があります。

型認識 lint を使用することを強くお勧めしますが、上記の情報は、皆様がご自身で十分な情報に基づいて決定できるようにするために含まれています。

トラブルシューティング​

問題が発生した場合は、トラブルシューティングと FAQ のページ をご覧ください。