✅

【ESLint】Flat Configの移行が面倒！だけどESLint v9を使用したいあなたへ

2024/06/22に公開

まじめに Flat Config の移行をするととっても時間かかりますよね？いくつもリポジトリ持ってるとどんどん時間が溶けていきます。
それでも ESLint v9 の新機能は使いたいんだよなーとか、ESLint v9 にしないと dependabot や renovate がうるさくてかなわんとか、という人（それはつまり僕のこと）のための選択肢をいくつか書いてみようと思います。

`@eslint/migrate-config`使う

物はこれです。

この方法は次のドキュメントに書いてあります。

以下のコマンドでとりあえず Flat Config で動きそうなeslint.config.*が生成されます。

npx @eslint/migrate-config .eslintrc.js
# .eslintrc.json 使っている場合
# npx @eslint/migrate-config .eslintrc.json
# .eslintrc.yml 使っている場合
# npx @eslint/migrate-config .eslintrc.yml

実行するとメッセージに出ますが、追加で必要な依存関係（多くの場合@eslint/jsと@eslint/eslintrc）をインストールしましょう。

また、実行した後は、元の .eslintrc.* と .eslintignore　は削除しておきましょう。
特に.eslintignoreを残しておくとeslint実行時の警告がうるさいです。

生成されたeslint.config.*は大体動く感じにはなってると思うのですが、ちょいちょい動かないのでそこは調整が必要です。
特に（なぜか）ecmaVersion: 5となってしまう部分は全部削除するのが吉だと思います。
あと.eslintignoreから生成されたignoresはまあまあ構文の違いを正しく変換してくれないことがあるので見直すのが良いと思います。
具体的には、ここに書いてある変換が、ちゃんとされているかチェックする必要があります。
https://eslint.org/docs/latest/use/configure/migration-guide#ignoring-files
（その後ほとんどうまく変換されるので何か勘違いしていたかもです😓）

ちょいちょい修正が必要というところではそこそこ面倒ですが、それでも真面目に Flat Config に移行するよりは全然楽だと思います。

あと@eslint/migrate-config自体は割と新しいツールなので、そのうち上記の問題も解消されるかもしれません。

`@eslint/eslintrc`の`FlatCompat`使う

Flat Config への移行で、部分的に @eslint/eslintrcのFlatCompatを使うこともできます。なんならnew FlatCompat().config(...)を使用して.eslintrc.jsを変換するだけという方法もありますが、それをするなら@eslint/migrate-config使う方が便利だと思います。

`@eslint/compat`使う

これはFlat Configの移行が面倒なあなたにとっては大して役に立たないトピックではありますが、
Flat Config への移行作業は別に苦じゃないけど、使ってるeslint-pluginが ESLint v9 の破壊的変更の影響でまだ使えないような場合は、@eslint/compatを使うと良いかもしれません。

物としてはこれです。

例えば、eslint-plugin-reactは現時点ではESLint v9に対応していないので、次のようにすることで問題を回避できます。

import { fixupPluginRules } from "@eslint/compat";
import reactPlugin from "eslint-plugin-react";

export default [
	{
		files: [...],
		plugins: {
			react: fixupPluginRules(reactPlugin)
		},
    }
];

ちなみにeslint-plugin開発者向けの破壊的変更のリストはこれです。

ESLint v9対応がされなくて困っているeslint-pluginのリポジトリにissue開く時はこの情報も提供してあげると良いかもしれません。

ESLINT_USE_FLAT_CONFIG=false する

ESLint v9を使用していても、ESLINT_USE_FLAT_CONFIGの環境変数をfalseにすることで、以前の.eslintrc.*を使用できます。

この方法は次のドキュメントのトップに書いてあります。

ちなみにvscode-eslintで同じことしたい場合は、v3.0.5以上にアップグレードした上で、eslint.useFlatConfigにfalseを設定します。

ESLint構成を触らなくていいというお手軽さはありますが、あらゆる場所で環境変数書き換えたりしないといけないのは、逆に面倒かもしれませんね。

まとめ

結局どれも面倒ですね。@eslint/migrate-configの今後の発展に期待します。

@eslint/migrate-config使う

@eslint/eslintrcのFlatCompat使う

@eslint/compat使う

ESLINT_USE_FLAT_CONFIG=false する

まとめ

Discussion

`@eslint/migrate-config`使う

`@eslint/eslintrc`の`FlatCompat`使う

`@eslint/compat`使う