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`廃止について](https://eslint.org/blog/2023/10/flat-config-rollout-plans/#eslintrc-removed-in-eslint-v10.0.0)

つまり、引き続き `.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](https://eslint.org/docs/latest/use/configure/migration-guide)

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

`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`


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242020/47427d25-54b5-42cc-2411-dcf655484f2c.png)

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](https://eslint.nuxt.com/)

### **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**

https://zenn.dev/gerunda/articles/20240430-nuxt-eslint-flat-config-migration

https://qiita.com/yuki_s_14/items/96620ccfb1dd897ce9f3

https://n-laboratory.jp/articles/nuxt3-flat-config-eslint-stylistic

# **エンジニア募集中**

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

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

https://gakken-leap.co.jp/recruit/