ESLintは、JavaScriptやTypeScriptのコード品質を維持するための静的解析ツールです。従来の.eslintrcファイルに代わり、eslint.config.jsを使用することで、より柔軟な設定が可能となりました。以下に、eslint.config.jsのサンプルコード、各項目の概要、そして詳細な説明を提供します。

eslint.config.jsのサンプルコード

import { FlatCompat } from '@eslint/eslintrc';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import importPlugin from 'eslint-plugin-import';
import jsxA11y from 'eslint-plugin-jsx-a11y';
import tseslint from '@typescript-eslint/eslint-plugin';

const compat = new FlatCompat();

export default [
  {
    ignores: ['dist'], // 無視するファイル・ディレクトリ
  },
  {
    files: ['**/*.{js,jsx,ts,tsx}'], // 適用するファイル
    languageOptions: {
      ecmaVersion: 2020,
      parser: '@typescript-eslint/parser',
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      import: importPlugin,
      'jsx-a11y': jsxA11y,
      '@typescript-eslint': tseslint,
    },
    settings: {
      react: {
        version: 'detect',
      },
      'import/resolver': {
        typescript: {}, // TypeScriptのresolverを有効化
      },
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      ...tseslint.configs.recommended.rules, // TypeScript ESLintルールの適用
      'no-restricted-imports': ['error', { patterns: ['./', '../'] }],
    },
  },
  ...compat.extends(
    'plugin:@typescript-eslint/recommended',
    'plugin:import/recommended',
    'plugin:jsx-a11y/recommended',
    'prettier'
  ),
];

各項目の概要

項目名	内容
`ignores`	ESLintの解析から除外するファイルやディレクトリを指定します。
`files`	ESLintの解析対象とするファイルパターンを指定します。
`languageOptions`	ECMAScriptのバージョンや使用するパーサーを設定します。
`plugins`	使用するESLintプラグインを指定します。
`settings`	プラグインや環境に関連する追加設定を行います。
`rules`	適用するESLintのルールを定義します。
`compat.extends`	既存の設定を拡張して適用します。

各項目の詳細説明

1. ignores

ignores: ['dist']

説明: distディレクトリ内のファイルをESLintの解析対象から除外します。通常、ビルド済みのファイルは解析不要であるため、この設定を行います。

2. files

files: ['**/*.{js,jsx,ts,tsx}']

説明: プロジェクト内のすべてのJavaScriptおよびTypeScriptファイル（.js, .jsx, .ts, .tsx）をESLintの解析対象とします。

3. languageOptions

languageOptions: {
  ecmaVersion: 2020,
  parser: '@typescript-eslint/parser',
}

ecmaVersion: ECMAScript 2020の構文を使用することを指定します。
parser: TypeScriptコードを解析するために、@typescript-eslint/parserを指定します。

4. plugins

plugins: {
  'react-hooks': reactHooks,
  'react-refresh': reactRefresh,
  import: importPlugin,
  'jsx-a11y': jsxA11y,
  '@typescript-eslint': tseslint,
}

説明: ESLintの機能を拡張するためのプラグインを指定します。各プラグインは特定のルールセットや解析機能を提供します。

5. settings

settings: {
  react: {
    version: 'detect',
  },
  'import/resolver': {
    typescript: {},
  },
}

react.version: 使用しているReactのバージョンを自動検出します。
import/resolver: eslint-plugin-importがTypeScriptのモジュール解決を正しく行うための設定です。

参考記事

6. rules

rules: {
  ...reactHooks.configs.recommended.rules,
  ...tseslint.configs.recommended.rules,
  'no-restricted-imports': ['error', { patterns: ['./', '../'] }],
}

説明: 適用するESLintのルールを定義します。推奨ルールセットを展開し、特定のルールを追加または上書きします。

7. compat.extends

...compat.extends(
  'plugin:@typescript-eslint/recommended',
  'plugin:import/recommended',
  'plugin:jsx-a11y/recommended',
  'prettier'
)

説明: 既存の設定を拡張して適用します。FlatCompatを使用することで、従来の.eslintrc形式の設定をeslint.config.js形式に適用できます。

以上の設定により、ReactやTypeScriptを使用したプロジェクトで、コード品質やスタイルの一貫性を保つことができます。

Flat Config 対応が完了していない共有設定を移行する：参考記事