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

従来の ESLint セットアップ

クイックスタート​

これらの手順に従うことで、推奨されるルールを使用して TypeScript コードで ESLint をできるだけ早く実行できます。

注記

このページは、ESLint の従来の設定フォーマット向けです。ESLint の新しい「フラット」設定フォーマットについては、はじめにを参照してください。

手順 1: インストール​

まず、ESLint、TypeScript、およびこのプラグインに必要なパッケージをインストールします。

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

手順 2: 構成​

次に、プロジェクトのルートに ` .eslintrc.cjs ` 設定ファイルを作成し、以下の内容を追加します。

.eslintrc.cjs
/* eslint-env node */
module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
};
情報

プロジェクトで ESM を使用していない場合は、ファイル名を `.eslintrc.js` にしても問題ありません。詳細については、ESLint の設定ファイルのドキュメントを参照してください。

手順 3: ESLint の実行​

プロジェクトのルートでターミナルを開き、次のコマンドを実行します。

npx eslint .

ESLint は、現在のフォルダー内のすべての TypeScript 互換ファイルを lint し、結果をターミナルに出力します。

詳細​

  • `parser: '@typescript-eslint/parser'` は、ESLint に、インストールした `@typescript-eslint/parser` パッケージを使用してソースファイルを解析するように指示します。
    • これは必須です。指定しないと、ESLint は TypeScript コードを通常の JavaScript として解析しようとしてエラーをスローします。
  • `plugins: ['@typescript-eslint']` は、ESLint に `@typescript-eslint/eslint-plugin` パッケージをプラグインとしてロードするように指示します。
    • これにより、コードベース内で typescript-eslint のルールを使用できます。
  • `extends: [...]` は、ESLint に、設定が指定された設定を拡張することを指示します。
    • `eslint:recommended` は、ESLint の組み込みの「推奨」設定です。既知のベストプラクティスを lint する、小さくて賢明なルールセットを有効にします.
    • `plugin:@typescript-eslint/recommended` は、typescript-eslint の「推奨」設定です。 `eslint:recommended` と似ていますが、プラグインの TypeScript 固有のルールを有効にします.
  • `root: true` は、一般的に、このファイルがプロジェクトで使用されるルートレベルのファイルであり、ESLint はこのディレクトリを超えて設定ファイルを検索しないことを示すための良い ESLint プラクティスです.

次の手順​

この作業に問題がある場合は、トラブルシューティングと FAQ を参照してください。

追加の設定​

次の 2 つの設定を有効にすることをお勧めします.

  • `strict`: `recommended` のスーパーセットであり、バグも検出する可能性のある、より意見の分かれるルールが含まれています.
  • `stylistic`: バグを大幅に検出したりロジックを変更したりすることなく、一貫したスタイルを強制する追加のルールです.
.eslintrc.cjs
/* eslint-env node */
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/strict',
    'plugin:@typescript-eslint/stylistic',
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
};

これらについては、共有設定のドキュメント で詳しく読むことができます.

型付きリンティング​

また、TypeScript の型情報の力を活用した、強力なルールも多数提供しています。型付きルールのセットアップガイドについては、次のページをご覧ください。

ドキュメントリソース​