eslint

ESLint

クイックスタート

前提条件

• SSL サポート付きの Node.js（^18.18.0、^20.9.0、または >=21.1.0）
• 既存の package.json ファイル（必要に応じて npm init を実行してください）

インストールとセットアップ

自動セットアップ（推奨）：

npm init @eslint/config@latest

この対話型セットアップでは、プロジェクトについて質問し、eslint.config.js ファイルを作成します。

手動セットアップ：

# Install ESLint packages
npm install --save-dev eslint@latest @eslint/js@latest

# Create configuration file
touch eslint.config.js

基本設定

新しいフラット設定形式（ESLint 9.0+）では、eslint.config.js を使用します。

import { defineConfig } from "eslint/config";
import js from "@eslint/js";

export default defineConfig([
  {
    files: ["**/*.js"],
    plugins: { js },
    extends: ["js/recommended"],
    rules: {
      "no-unused-vars": "warn",
      "no-undef": "warn"
    }
  }
]);

ESLint の実行

# Lint a single file
npx eslint yourfile.js

# Lint a directory
npx eslint src/

# Lint with auto-fix
npx eslint src/ --fix

ESLint の基本タスク

1. ESLint のセットアップ

JavaScript プロジェクトの場合

npm init @eslint/config@latest

次のオプションを選択します。

• ESLint をどのように使用しますか？ → 構文のチェック、問題の検出、コードスタイルの適用
• どの種類のモジュールを使用しますか？ → JavaScript モジュール（import/export）
• 使用するフレームワークは？ → None/React/Vue（該当するもの）
• プロジェクトで TypeScript を使用しますか？ → いいえ
• コードを実行する場所は？ → Browser および／または Node
• 設定ファイルの形式 → JavaScript/JSON/YAML（JavaScript を推奨）

TypeScript プロジェクトの場合

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

TypeScript の設定：

import { defineConfig } from 'eslint/config';
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

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

React + TypeScript の場合

npm install --save-dev \
  eslint \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-jsx-a11y \
  typescript-eslint

2. ルールの設定

ルールの重大度レベル

• "off" または 0 - ルールを無効にします
• "warn" または 1 - 警告（終了コードには影響しません）
• "error" または 2 - エラー（終了コードは 1 になります）

一般的なルール設定

基本ルール：

export default defineConfig([
  {
    rules: {
      // Enforce semicolons
      "semi": ["error", "always"],

      // Enforce const where possible
      "prefer-const": "error",

      // Warn on unused variables
      "no-unused-vars": "warn",

      // No console.log in production
      "no-console": ["error", { allow: ["warn", "error"] }],

      // Enforce consistent quotes
      "quotes": ["error", "single"],

      // Require === instead of ==
      "eqeqeq": ["error", "always"]
    }
  }
]);

TypeScript 固有のルール：

export default defineConfig([
  {
    files: ["**/*.ts", "**/*.tsx"],
    rules: {
      "@typescript-eslint/no-explicit-any": "warn",
      "@typescript-eslint/explicit-function-return-type": ["error", {
        allowExpressions: true
      }],
      "@typescript-eslint/naming-convention": ["error", {
        selector: "interface",
        format: ["PascalCase"],
        custom: {
          regex: "^I[A-Z]",
          match: false
        }
      }]
    }
  }
]);

設定コメント

ルールをインラインで無効にします。

/* eslint-disable no-console */
console.log('This is allowed');
/* eslint-enable no-console */

// Disable for single line
console.log('Debug'); // eslint-disable-line no-console

// Disable next line
// eslint-disable-next-line no-console
console.log('Debug');

// Disable specific rules
alert('foo'); // eslint-disable-line no-alert, no-undef

インラインで無効にする際のベストプラクティス：

1. 明確な理由を添え、必要最小限にとどめます

2. 理由を記載します。

   // eslint-disable-next-line no-console -- Debugging production issue #1234
   console.log('User data:', userData);
   

3. インラインでの無効化より、設定ファイルの変更を優先します

4. 一時的な無効化について、後続のタスクを作成します

3. ファイルパターンと無視設定

lint 対象ファイルの指定

export default defineConfig([
  {
    // Only lint TypeScript files in src/
    files: ["src/**/*.ts", "src/**/*.tsx"],

    // Ignore test files for certain rules
    ignores: ["**/*.test.ts", "**/*.spec.ts"]
  }
]);

グローバルな無視設定

export default defineConfig([
  {
    ignores: [
      "**/node_modules/**",
      "**/dist/**",
      "**/build/**",
      "**/.next/**",
      "**/coverage/**"
    ]
  },
  // ... rest of config
]);

4. 共有設定の使用

ESLint では、広く使われている設定を拡張できます。

import { defineConfig } from "eslint/config";
import js from "@eslint/js";
import globals from "globals";

export default defineConfig([
  js.configs.recommended, // ESLint recommended rules
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    }
  }
]);

広く使われている共有設定：

• eslint:recommended - ESLint の推奨ルール
• @typescript-eslint/recommended - TypeScript の推奨ルール
• @typescript-eslint/strict - より厳格な TypeScript ルール
• plugin:react/recommended - React のベストプラクティス
• plugin:react-hooks/recommended - React Hooks のルール

5. 問題の自動修正

ESLint は多くの問題を自動で修正できます。

# Fix all auto-fixable issues
npx eslint src/ --fix

# Show what would be fixed (dry run)
npx eslint src/ --fix-dry-run

自動修正可能なルールには、次のものがあります。

• 書式の問題（スペース、セミコロン、引用符）
• 単純なコード変換（prefer-const、アロー関数）
• import の並べ替え

自動修正できない問題には、手動での対応が必要です。

• ロジックエラー（実際に使用されている no-unused-vars）
• 複雑なリファクタリングが必要な場合

一般的なプロジェクトのシナリオ

React + TypeScript プロジェクト

完全な設定：

import { defineConfig } from 'eslint/config';
import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';

export default defineConfig([
  { ignores: ['dist'] },
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        project: './tsconfig.json'
      }
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true }
      ],
      '@typescript-eslint/no-unused-vars': ['error', {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_'
      }]
    }
  }
]);

Node.js + TypeScript プロジェクト

import { defineConfig } from 'eslint/config';
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import globals from 'globals';

export default defineConfig([
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['**/*.ts'],
    languageOptions: {
      globals: globals.node
    },
    rules: {
      '@typescript-eslint/no-explicit-any': 'warn',
      'no-console': 'off' // Console is fine in Node.js
    }
  }
]);

モノレポの設定

export default defineConfig([
  // Global ignores
  { ignores: ['**/dist/**', '**/build/**'] },

  // Frontend package
  {
    files: ['packages/frontend/**/*.{ts,tsx}'],
    languageOptions: {
      globals: globals.browser
    },
    // Frontend-specific rules
  },

  // Backend package
  {
    files: ['packages/backend/**/*.ts'],
    languageOptions: {
      globals: globals.node
    },
    // Backend-specific rules
  }
]);

インテグレーション

VS Code のセットアップ、CI/CD（GitHub Actions）、コミット前フック（Husky/lint-staged）、package.json スクリプトについては、references/integration.md を参照してください。

トラブルシューティング

よくある問題

「Cannot find module 'eslint/config'」

• ESLint 9.0+ に更新します：npm install eslint@latest

「Parsing error: Cannot find module '@typescript-eslint/parser'」

• パーサーをインストールします：npm install --save-dev @typescript-eslint/parser

ルールが適用されない

• ファイルパターンがソースファイルに一致していることを確認します
• 設定ファイル名が正しいことを確認します（eslint.config.js）
• 設定ファイルがプロジェクトのルートにあることを確認します

大規模なプロジェクトで lint が遅い

• node_modules、dist、build フォルダーに適切な無視設定を追加します
• --cache フラグを使用します：npx eslint --cache .
• CI で警告がある場合に失敗させるには、--max-warnings 0 の使用を検討します

高度なトピック

カスタムルールの作成

プロジェクト固有のパターンについては、references/custom_rules.md を参照してください。

TypeScript の型情報を活用した lint

型情報が必要な高度な TypeScript チェックについては、references/type_aware_linting.md を参照してください。

ルールリファレンス

例を含む包括的なルールリファレンスについては、references/rule_reference.md を参照してください。

ESLint 8.x からの移行

レガシーな .eslintrc.* 形式を使用しているプロジェクトについては、references/migration_guide.md を参照してください。