Nuxt の ESLint モジュールが Flat Config に対応していたので新しい構成に移行する

ESLint v9 で導入される新たな構成システム「Flat Config」。先日ついに v9 が正式リリースされ、ESLint のバージョンを更新するには新しい構成に切り替えなければならなくなりました。ただ、まだまだ v9 に対応していないプラグインなども多いような感じがするので、本格的に使い始めるのはもう少し先になるでしょうか。

「新しい構成、めんどいけど対応進めないとな～」とか考えながら何ヶ月もなにもせずにいたら、いつの間にかこのウェブサイトでも使用しているフレームワークの Nuxt に 新しい ESLint モジュールが作られて Flat Config に対応 していました。ウェブサイトも作られていて、ドキュメントがしっかり整備されている…。

Nuxt ESLint

ということで、自分用のメモも兼ねて Nuxt のウェブサイトのリポジトリで Flat Config に対応した ESLint の設定に切り替える作業を書いていこうと思います。

環境

Nuxt - 3.11.1
@nuxt/eslint - 0.3.0-beta.6
ESLint - 8.57.0
Node.js - 20.12.0
pnpm - 8.15.5

この投稿を執筆した時点では @nuxt/eslint はベータ版だったのですが、今月 4 月の 5 日にベータが外れた v0.3.0 がリリースされています。が、新しいバージョンでの動作確認がちゃんとできていないので、この投稿では上記のとおり 0.3.0-beta.6 を使用します。また、ESLint についても v9 の確認ができていないのと、対応していないプラグインなどが多いため、この投稿では v8 を使用します。

パッケージの追加と削除

元々の ESLint の構成ファイルの内容は以下のとおりです。Nuxt 用の構成である @nuxt/eslint-config と、Prettier と競合するルールをオフにする eslint-config-prettier を使用していました。また、Vue ファイルでタグの順番が <script> → <template> → <style> となるようにするルールも設定しています。

module.exports = {
  extends: ['eslint:recommended', '@nuxt/eslint-config', 'prettier'],
  rules: {
    'vue/component-tags-order': [
      'error',
      { order: ['script', 'template', 'style'] },
    ],
  },
}

基本的にはドキュメントのとおりに進めていきます。まずは必要なパッケージのインストールと、不要になるパッケージのアンインストールを行います。

$ pnpm add -D @nuxt/eslint
$ pnpm remove @nuxt/eslint-config eslint-config-prettier

Nuxt 用の ESLint モジュールとして @nuxt/eslint をインストールし、元々追加していた @nuxt/eslint-config はアンインストール。また「デフォルトでは Prettier で書き換えるようなスタイルについてのルールはオフになっているよ（意訳）」的なことがドキュメントに書かれているので、同じような用途の eslint-config-prettier は不要と判断し、こちらもアンインストール。

新たに追加した @nuxt/eslint は Nuxt のモジュールなので、nuxt.config.ts の modules にも追加しておきます。

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

ESLintの設定を書き換える

ESLint の新しい構成では、これまでの .eslintrc.js は使えなくなるようなので、新しくファイルを作成する必要があります。Nuxt ESLint のドキュメントに「プロジェクトのルートに eslint.config.mjs を作成する」という記述があるので、今回は eslint.config.mjs ファイルを作成します。

import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt()

Nuxt のモジュールに @nuxt/eslint を追加したあとで nuxt prepare を実行すると追加される .nuxt/eslint.config.mjs をインポートし、エクスポートするだけで、カスタマイズをしない場合は設定が完了するらしい。簡単。

続いてカスタマイズですが、@nuxt/eslint モジュールのコードを確認すると、eslint:recommended と @nuxt/eslint-config は既にルールが設定されているように見えたので、追加での設定は不要そう。あとはタグの順番のルールですが、独自の設定を追加したい場合は withNuxt 関数の引数に指定するようなので、追加します。

import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt({
  files: ['**/*.vue'],
  rules: {
    'vue/component-tags-order': [
      'error',
      { order: ['script', 'template', 'style'] },
    ],
  },
})

また、デフォルトでは @ts-ignore の使用が許可されていないようなのですが、諸事情で使わないといけない箇所があるため、こちらの設定を上書きします。ドキュメントによると、@typescript-eslint/ban-ts-comment のルールは withNuxt() に続けて記述した override の中で設定の変更が可能なようなので、そちらに設定を追加します。

最終的な eslint.config.mjs は以下のとおりです。

import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt({
  files: ['**/*.vue'],
  rules: {
    'vue/component-tags-order': [
      'error',
      { order: ['script', 'template', 'style'] },
    ],
  },
}).override('nuxt:typescript', {
  rules: {
    '@typescript-eslint/ban-ts-comment': [
      'error',
      {
        'ts-expect-error': 'allow-with-description',
        'ts-ignore': 'allow-with-description',
        'ts-nocheck': false,
        'ts-check': false,
      },
    ],
  },
})

ESLintを実行するコマンドを変更する

ESLint の新しい構成を使用する場合、ESLint を実行するときの拡張子を指定する --ext フラグが使用できなくなっています。私の環境では --ext を使用していたので、package.json の script に指定しているコマンドを変更します。

{
  "scripts": {
    "lint": "eslint \"**/*.{js,cjs,mjs,ts,cts,mts,vue}\"",
    "lint:fix": "eslint \"**/*.{js,cjs,mjs,ts,cts,mts,vue}\" --fix",
    ...
  }
}

設定を変更後、ESLint を実行して動作することを確認します。

$ pnpm lint

VSCode用の設定を追加する

ESLint の新しい構成は、まだ標準で有効になっていません。なので、.vscode/settings.json で「Flat Config」を使用するように設定します。

{
  "eslint.experimental.useFlatConfig": true,
  ...
}

これで新しい構成への移行は完了です。ドキュメントも分かりやすく整備されていて、思っていたよりも簡単で助かりました。便利なモジュールを作成してくださった方々に感謝🙏

@nuxt/eslint モジュールはまだベータ版ということなので、仕様が変わる可能性はありますが…。全部書き直さないといけなくなるようなことがないよう祈っときます。