Closed4

[ESLint]flat config への変更

ESLint
YOS0602YOS0602

マイグレーションツール

npx @eslint/migrate-config .eslintrc.json

既存の eslintrc 形式ファイルを読み込んで、flat configファイルを作成してくれる。
.eslintrc.js を使用していた場合、関数や条件式などはうまくマイグレーションされないらしいので注意が必要。

flat config file format を使用する

eslint.config.jsをルートに置く。v9にバージョンアップすれば、flat config file がデフォルトで読み込まれる。 ESLINT_USE_FLAT_CONFIG をfalseに設定すれば eslintrc 形式も使用できる。

Plugin

plugin は CommonJS require() もしくは ES module import によりJavaScriptオブジェクトとして読み込む。

parser

languageOptions.parser プロパティに指定する。

YOS0602YOS0602

Glob

特定ファイルにだけ適応したいルールは、 files ごとに個別のオブジェクトを作成して指定する。

export default [
    js.configs.recommended, // Recommended config applied to all files
    // File-pattern specific overrides
    {
        files: ["src/**/*", "test/**/*"],
        rules: {
            semi: ["warn", "always"]
        }
    },
    {
        files:["test/**/*"],
        rules: {
            "no-console": "off"
        }
    }
    // ...other configurations
];

Language Options

globals と parserOptionsは languageOptionsプロパティ配下に統合された。

windowオブジェクトと使うようにするためのbrowser とか、 node とかをenvに指定していたけど、envというプロパティはflatにはない。globalsというnpmパッケージをimportして、 globalsプロパティに含めさせる。

import globals from "globals";

export default [
    {
        languageOptions: {
            ecmaVersion: 2022,
            sourceType: "module",
            globals: {
                ...globals.browser,
                ...globals.node,
                myCustomGlobal: "readonly"
            }
        }
        // ...other config
    }
];

Predefined and Shareable Configs

eslint:recommended など、あらかじめ定義されてるconfigを使い回す時の設定。eslintrcでは extendsを使用していた内容について。

import js from "@eslint/js";
import customTestConfig from "./custom-test-config.js";

export default [
    js.configs.recommended,
    {
		    // 他のプロパティと組み合わせて適用対象を絞ったり、内容を変更したりできる。
        ...customTestConfig,
        files: ["**/*.test.js"],
    },
    // ...other config
];

eslintrc形式のconfigをflatで使用する

まだflat形式フォーマットに対応できていないpluginや共通設定を使いたい場合。

@eslint/eslintrc パッケージ(README)のFlatCompat ユーティリティを使用する。

import { FlatCompat } from "@eslint/eslintrc";
import path from "path";
import { fileURLToPath } from "url";

// mimic CommonJS variables -- not needed if using CommonJS
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

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

export default [
    // mimic ESLintRC-style extends
    ...compat.extends("eslint-config-my-config"),
];

Ignoring Files

flat設定では.eslintignore はもう読み込まなくなったため削除する。削除前に、eslint適用を除外したいファイルパターンをflat configに移す必要がある。

export default [
    // ...other config
    {
        // Note: ignores を指定するオブジェクト内では他のプロパティを指定しない
        ignores: ["**/temp.js", "config/*"]
    }
];

ignores: ["temp.js"] と指定すると、configファイルと同じディレクトリに存在する同名ファイルのみが無視される。どのディレクトリであっても指定した名前のファイルを無視させるためには、"**/temp.js" 形式にする必要がある。

flat configではdotfiles (e.g. .dotfile.js)がデフォルトで無視されない。"**/.*” をignoresに指定することで、dotfilesが無視される。

package.json に設定を記述できなくなった

eslintrcでは、package.json内に eslintConfig プロパティを指定することで設定を指定できたが、flatではできなくなっている。

YOS0602YOS0602

VSCode拡張機能

vscode-eslint v3.0.10 でESLint v9.xサポートが追加された。

v3.0.10より前のバージョンを使用している場合、.vscode/settings.jsonに下記を追加する。

{
  // required in vscode-eslint < v3.0.10 only
  "eslint.experimental.useFlatConfig": true
}
このスクラップは2025/01/20にクローズされました