ESLintでTypeScriptベースの設定ファイル（eslint.config.ts）を使えるようになった

#GitHub#HowTo#JavaScript#Microsoft#TypeScript#VS Code#Web開発#オープンソース#ニュース#プログラミング
投稿日：

2024年8月10日、TypeScriptで書かれた設定ファイルを実験的にサポートするESLint v9.9.0がリリースされました。

4月にリリースされたESLint v9.0.0では従来のeslintrcによる設定が非推奨となり、JavaScriptベースのFlat Config（eslint.config.js）に移行しました。

今回のリリースでは、TypeScriptベースの設定ファイル（eslint.config.ts、eslint.config.mts、eslint.config.cts）を実験的にサポートするようになりました。

これにより、TypeScriptによる入力補完の恩恵を受けながら、ESLintの設定ファイルを書けるようになります。

TypeScriptで設定ファイルを書く方法

TypeScriptベースの設定ファイルを利用するには、いくつかの設定が必要です。

まずは、軽量なTypeScriptのランタイム「jiti」をインストールします。jitiはESLintの依存関係に含まれていないため、手動でインストールする必要があります。

Terminal window
npm install -D jiti

次に、従来のFlat Configのファイル（eslint.config.jsなど）の拡張子を、TypeScript（eslint.config.tsなど）に変更します。記事執筆時点では、.ts、.mts、.ctsの拡張子がサポートされています。

必要であれば、設定ファイルに型定義を追加します。

実際にTypeScriptベースの設定ファイルを利用するには、ESLintの実行時にフラグを有効化する必要があります。

Terminal window
npx eslint --flag unstable_ts_config ./src

これで、TypeScriptベースの設定ファイルを利用できるようになりました。

なお、ESLintが実行時に設定ファイルの型チェックを実施しない（型定義を単にコメントとして無視する）ことと、現時点ではjitiがtop-level awaitをサポートしていないことに注意してください。

VS Codeの拡張機能で利用する方法

VS CodeのESLint拡張機能では、フラグを有効化することでTypeScriptベースの設定ファイルを利用できます。

VS Codeのsettings.jsonを開き、次の設定を追加します。

settings.json
1
{
2
    // ...その他の設定
3
    "eslint.options": {
4
        "flags": [
5
            "unstable_ts_config"
6
        ]
7
    }
8
}

設定を変更したあとは、VS Codeを再起動するかコマンドパレットから［ESLint: Restart ESLint Server］を実行してください。

参考

Twitterのアイコン LINEのアイコン Threadsのアイコン Misskeyのアイコン Misskeyのアイコン
著者のアイコン画像
ろぼいん
Twitter Misskey GitHub Qiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

最新記事