ESLint_v9.x移行に挑戦、Nuxt3プロジェクトでFlat_Configを活用する

はじめに

こんにちは！Gakken LEAPでフロントエンドエンジニアのkouです。

最近、Shikaku Passのフロントエンドにて、古いバージョンのパッケージを全面的に調査し、最新バージョンとの差分を確認してアップデートを実施しました。

その中で最も時間がかかったのがESLintのアップグレードです。 具体的に、ESLintをV8.5.7からV9.xにアップグレードしようとすると、以下のようなエラーメッセージが表示されます：

From ESLint v9.0.0, the default configuration file is now eslint.config.js.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:

原因は、ESLint v9 で Flat Config がデフォルトとなったことです。新しいバージョンでは、eslint.config.{js,cjs,mjs} が従来の .eslintrc 設定ファイルに代わるものとして採用されました。

従来の設定ファイルを一時的に使用したい場合は、環境変数 ESLINT_USE_FLAT_CONFIG を false に設定することで対応できます。ただし、Flat Config の実装に関する公式ドキュメントによると、次のメジャーバージョン（10.x）で .eslintrc 形式のサポートが完全に終了することが明記されています。

つまり、「.eslintrc.* から eslint.config.mjs への移行」となります。

今回のアップグレードの経験をまとめてみましょう。

Flat Config に移行

ESLint のアップグレード

eslintパッケージをV9.xにアップグレードします。

次のコマンドを実行して、最新の依存関係をインストールし直します：

pnpm remove eslint

pnpm add eslint@latest -D

この段階で、eslint.config.jsへの移行を促す警告メッセージが表示されます。

Flat Config に移行しない場合の対応：

Flat Config に移行しない選択肢も存在しますが、従来の .eslintrc 設定ファイルは非推奨（deprecated）となり、ESLint v10 で完全に廃止される予定です。そのため、一時的な対応としてのみ使用し、最終的には Flat Config への移行を推奨します。

詳細は以下をご参照ください： Flat Config Rollout Plans - ESLint v10での.eslintrc廃止について

つまり、引き続き .eslintrc 設定ファイルを使用する場合、環境変数 ESLINT_USE_FLAT_CONFIG を false に設定する必要があります。

例：

package.json

"lint": "ESLINT_USE_FLAT_CONFIG=false eslint --fix --ext .js,.ts,vue",

---

Flat Config に移行する場合の対応：

.eslintrc.xxx

ファイル名の変更

ESLint V9.x より前のバージョンでは、設定ファイルの名前は通常 .eslintrc.xxx でした。たとえば：

• .eslintrc.js
• .eslintrc.cjs
• .eslintrc.json

現在のシステムでは .eslintrc.cjs を採用しています。

V9.x では新しい設定システムが設計され、設定ファイルの名前が以下のように変更されました：

• eslint.config.js
• eslint.config.mjs
• eslint.config.cjs

移行手順については公式ガイドを参照してください： Migration Guide - ESLint

クイックマイグレーション

ESLintは、既存の設定をV9.x形式に移行できる便利なマイグレーションツールを提供しています。

以下のコマンドをターミナルで実行してください：

npx @eslint/migrate-config .eslintrc.cjs

ただし、このツールは以下のような 静的な設定ファイル に対して適しています：

• .eslintrc
• .eslintrc.json
• .eslintrc.yml

.eslintrc.js など、動的なロジック（関数、計算など）を含む設定ファイルの場合、複雑な処理が移行中に失われる可能性があります。

注意： このツールが生成した設定ファイルが完全に動作するとは限りません。手動で確認・調整する必要があります。

実行結果

マイグレーションコマンドを実行した結果、新しい設定ファイル eslint.config.mjs が生成されました。

---

関連する依存パッケージのアップグレード

しかし、eslint 関連の依存パッケージを V9.x に対応するバージョンへアップグレードしようとした際に、以下の問題が発生しました：

• eslint-plugin-prettier
• eslint-plugin-vue
• eslint-plugin-n
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser

ESLint を 9.x にアップグレードした結果、これらの依存パッケージの多くで peerDependencies に指定されているバージョンが依然として ^8.0.0 以下であるため、これらの多くが V9.x をサポートしていないことが判明しました。

特定の依存関係について

例えば：

@nuxtjs/eslint-config-typescript

これは Nuxt プロジェクト専用の ESLint 設定パッケージで、@typescript-eslint/eslint-pluginと@typescript-eslint/parserに依存し、ESLint の特定バージョン（主に v8.x）と互換性があります。しかし、このパッケージは現在のところFlat Config には対応していません。

解決策

インターネットで調査の結果、次のような解決策を見出しました： @nuxtjs/eslint-config-typescript\** を@nuxt/eslint** に置き換える必要があります。

Nuxt ESLint

Nuxt の公式モジュールを利用することで、Nuxt 環境に最適化された ESLint 設定を簡単に導入できます。

このモジュールは、ESLint の強力な静的解析機能を Nuxt プロジェクトに統合し、コード品質を向上させます。特に、最新の Flat Config 形式に完全対応しており、現代的な ESLint 設定をスムーズに実装できることが大きな特徴です。

詳しい導入手順は、以下の公式ページをご参照ください： Nuxt ESLint Module

1. Nuxt の公式から提供されている ESLint Moduleをインストールします。

npm install --save-dev @nuxt/eslint eslint

2. nuxt.config.ts に以下を追加します。

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
})

build を実行すると、ルートディレクトリに ./.nuxt/eslint.config.mjs が生成されます。

次に、生成された eslint.config.mjs をルートディレクトリの eslint.config.mjs にインポートして使用するように設定します。

eslint.config.mjs

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  {
    ignores: [
      'node_modules/',
      'base/postcss.config.js',
      'base/assets',
      'B2B/assets',
      'B2C/assets',
      'test/assets',
      '**/.nuxt',
      '**/.output',
    ],
    files: ['**/*.vue', '**/*.ts'],
    rules: {
      'no-console': 'error',
      '@typescript-eslint/no-explicit-any': 'error',
    },
  },
  {
    files: ['**/*.vue'],
    rules: {
      'vue/no-multiple-template-root': 'error',
      'vue/multi-word-component-names': 'error',
      'vue/require-v-for-key': 'error',
      'vue/no-use-v-if-with-v-for': 'error',
    },
  },
)

3. package.json のスクリプトを以下の内容に修正します

package.json に以下のスクリプトを追加または修正してください：

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
  },
}

4. nuxt.config.tsに以下を追加します

以下の設定を nuxt.config.ts に追記してください：

// nuxt.config.ts
export default defineNuxtConfig({
  eslint: {
    config: {
      stylistic: {
        indent: 2,
        quotes: 'single',
        semi: false,
      },
    }
  }
})

設定を保存したら、VSCode を再起動してください。その後、保存時やプロジェクト起動時に ルールが適用されていることを確認します。

5. 実行して確認する

以下のコマンドを実行し、ESLint の設定が正しく動作しているか確認します：

npx eslint .

これで、ESLint がプロジェクト全体で適切に機能していることを確認できます！

参考URL

エンジニア募集中

Gakken LEAP では教育をアップデートしていきたいエンジニアを絶賛大募集しています！！

ぜひお気軽にカジュアル面談へお越しください！！