Zenn
Open1

ESLintの"compat"って何？

Kohki_TakatamaKohki_Takatama

compat = 互換・変換

eslint の compat は、ESLintの古い .eslintrc 構成形式（JavaScript、YAML、JSON形式）を新しい Flat Config 形式に移行するための互換性レイヤーです。このコードは、@eslint/eslintrc パッケージの FlatCompat クラスを使って、従来の extends やプラグインを Flat Config 形式で利用可能にしています。

// create-next-appで作られるeslint設定ファイル
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
];

export default eslintConfig;

詳細な説明

  1. 従来のESLint設定（.eslintrc）

    • 従来の .eslintrc では、設定ファイルに extends キーワードを使って他の共有設定（たとえば next/core-web-vitals）を継承できました。

  2. Flat Config形式

    • ESLintはバージョン8以降、従来の構成形式から新しい Flat Config 形式に移行しました。新しい形式は .eslintrc を廃止し、純粋なJavaScriptモジュール構成を利用します。

  3. FlatCompat の役割

    • FlatCompat は、古い設定を新しい Flat Config 構成で使用できるようにするための互換性クラスです。これにより、従来の extends 設定やプラグインをそのまま移行することができます。

コードの動作

以下のコードの流れを説明します：

import { FlatCompat } from "@eslint/eslintrc";

// __dirnameを計算
const compat = new FlatCompat({
  baseDirectory: __dirname, // ベースディレクトリを指定
});

// 古い設定をFlat Configに変換
const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"), // extendsを変換
];

export default eslintConfig;

  1. FlatCompat のインスタンスを作成します。

    • baseDirectory には、プロジェクトのベースディレクトリを指定します。

  2. compat.extends() を使い、従来の extends キーワードで指定された共有設定（例: next/core-web-vitals, next/typescript）を新しい形式に変換します。

  3. 変換された設定を eslintConfig 配列としてエクスポートします。

実際に使われるケース

  • プロジェクトでESLintの新しい Flat Config 形式に移行したいが、古い共有設定やプラグインがまだ完全に対応していない場合。
  • 一部の設定やルールが従来の .eslintrc に依存しているプロジェクトで、移行作業をスムーズに進めたい場合。

注意点

  • @eslint/eslintrc パッケージはあくまで移行ツールなので、可能であれば新しい Flat Config 形式を直接使用することが推奨されます。
  • 依存している共有設定やプラグインが Flat Config 形式に完全対応している場合は、FlatCompat を使わずに直接新しい形式で構成を作成することができます。