💚

Nuxt3のLinterは Nuxt ESLint で整備する (マイグレーションあり)

2024/05/14に公開1

はじめに

こんにちは、がんがんです。
2024年4月、NuxtからNuxt ESLintというモジュールが公開されました。Nuxtユーザー待望のAll-in-one ESLintモジュールです。

https://eslint.nuxt.com/

本モジュールの登場によりNuxtにおけるリンターの設定方法が大きく変わりました。
本記事ではNuxt ESLintを用いたマイグレーションを中心に新しいNuxt ESLintをセットアップしていきます。

Nuxt ESLint とは

Nuxt ESLintはAll-in-one ESLint integration for Nuxtと公式ドキュメントに記載がある通り、NuxtユーザーのためのAll-in-oneモジュールです。
今までのNuxtユーザーは

  • Nuxt3でESLintを使う場合、どれがNuxt公式のルールだろう
  • NuxtでESLint Flat Configはどうすれば良い?
  • nuxt/eslint-config、nuxt/eslint-module、それぞれどのように使い分けるの?

というようにリンター設定に関する情報が錯綜しており戸惑うケースが多かったかと思います。この問題を解決するのが Nuxt ESLintです。

https://eslint.nuxt.com/


Nuxt ESLintはESLint Config InspectorESLint Stylisticを作成されているAnthony Fu氏主導で作成されたものです。
Nuxt ESLint開発の背景、Nuxt ESLintによって実現できるようになったことはNuxt公式ブログに詳しく記載されています。本モジュールの詳細説明は公式ブログの方が詳しいため下記ブログを合わせてご覧ください。

https://nuxt.com/blog/eslint-module

余談ですがESLint Config InspectorについてはESLint BlogにAnthony Fu氏の記事がございます。非常に面白い内容となっているためご興味ある方は是非覗いてみてください。

https://eslint.org/blog/2024/04/eslint-config-inspector/

本記事で取り扱う内容

本書では以下3パターンのセットアップを取り扱います。

  1. 既存NuxtアプリにNuxt ESLintを導入する
  2. @nuxt/eslint-configのバージョンアップのみ行う
  3. 新規NuxtアプリにNuxt ESLintを導入する

後半ではESLint Stylisticのセットアップについても触れます。
本記事ではPrettierと共存せずESLint Stylisticのみでフォーマットする方針でセットアップを行います。

Migrate to Nuxt ESLint

step1: remove .eslintrc* and install @nuxt/eslint

Nuxt ESLintはESLint Flat Configのサポートをデフォルトとしています。公式ドキュメントでも以下のように説明されています。

This module is designed for the new ESLint flat config format which is the default format since ESLint v9. Flat config is supported since ESLint v8.45.0 so you can use any version of ESLint later than that. We recommend you to use the latest version of ESLint to get the best experience.

The legacy .eslintrc config is not supported by this module. We highly recommend you to migrate over the flat config to be future-proof. If you still want to use the legacy format, you might need to manually config with @nuxt/eslint-config, which will missing some features like project-aware settings tho.

Flat Config対応にあたり.eslintrc.js.eslintrcなどのファイルを削除します。Flat Configでは.eslintignoreを利用しないため合わせて削除します。

terminal
rm .eslintrc* .eslintignore

続いて、@nuxt/eslintのインストール および ESLintのバージョンを更新します。@nuxt/eslint-config@nuxt/eslintに内包されているため削除します。

terminal
npx nuxi@latest module add eslint && \
pnpm add -D eslint@latest && pnpm remove @nuxt/eslint-config

Nuxi(Nuxt CLI)を用いてモジュールを追加するとnuxt.config.tsへの手動追加が不要となります。

ここまでで完了している`nuxt.config`、`package.json`のセットアップ
nuxt.config.ts
export default defineNuxtConfig({
+ modules: ['@nuxt/eslint'],
});
package.json
{
  "scripts": {
    // Note: 必要に応じて修正してください
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    ...
  },
  "devDependencies": {
+   "@nuxt/eslint": "^0.3.12",
-   "@nuxt/eslint-config": "^0.2.0",
+   "eslint": "^9.2.0",
  },
  "peerDependencies": {
    // Note: 必要に応じて追加してください
+   "eslint": ">=9.0.0"
  }
}

step2: setup eslint.config.mjs

続いてeslint.config.mjsのセットアップを行います。こちらはご自身の設定に合わせて変更してください。
.nuxtnuxt prepareコマンド実行時に生成されます(postinstall: nuxt prepareが設定されていれば再度インストールすると生成されます。また、nuxt devなどの実行時にも自動で生成されます)

以下の設定は一例です。
私は @typescript-eslint/explicit-function-return-type ルールを有効にして使うことが多いです。

eslint.config.mjs
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs';

export default withNuxt({
  ignores: [
    '**/coverage',
    '.vscode/**',
  ],
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'error',
  },
});

env.browserenv.node@nuxt/eslint-configで設定済みのため追加設定は行なっていません。また、ignoresについてもデフォルト未定義のものを追加しています。

デフォルトで定義されているignores
デフォルトで定義されているglobals

もし追加でglobalsを設定する場合は以下のように設定すれば大丈夫です。

eslint.config.mjs
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs';

export default withNuxt({
  ignores: [
    '**/coverage',
    '.vscode/**',
  ],
+ languageOptions: {
+   globals: {
+     ...globals.browser,
+     ...globals.node,
+   },
+ },
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'error',
  },
});



これで設定完了です。ESLint Stylisticは後半で触れていきます。

必要に応じて: .vscode/settings.json

VS Codeを利用している場合は.vscode/settings.jsonでFlat Configの使用を有効にしておきます。

`.vscode/settings.json`のセットアップ
.vscode/settings.json
{
  "eslint.experimental.useFlatConfig": true
}

Update @nuxt/eslint-config@v3.x

前項では@nuxt/eslintモジュールを利用する場合のマイグレーションでした。本項では@nuxt/eslintモジュールを利用せず@nuxt/eslint-configのみをアップデートするケースです。

https://eslint.nuxt.com/packages/config

step1: update eslint, @nuxt/eslint-config

まずは@nuxt/eslint-configのアップデートを行います。

terminal
pnpm add -D eslint@latest @nuxt/eslint-config@latest

インストール完了後、以下のようになっていると思います。

package.json
{
  "devDependencies": {
+   "@nuxt/eslint-config": "^0.3.12",
+   "eslint": "^9.2.0",
  },
  "peerDependencies": {
+   "eslint": ">=9.0.0"
  }
}

step2: update eslint.config.mjs

続いてeslint.config.mjsを修正します。この時、必要に応じて.eslintrc.eslintignoreは削除します。
@nuxt/eslint-configを用いる場合、withNuxt()ではなくcreateConfigForNuxt()を用いている点が前項と異なる点です。

eslint.config.mjs
// @ts-check
import { createConfigForNuxt } from '@nuxt/eslint-config/flat';

export default createConfigForNuxt().append({
  ignores: ['**/coverage', '.vscode/**'],
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'error',
  },
});

Setup Nuxt ESLint

Nuxt ESLintを新規Nuxtアプリに追加する場合はMigrate to Nuxt ESLintの項と同じ手順で進めれば大丈夫です。
参考までにnuxi initからの手順を下記にまとめます。

nuxi initからNuxt ESLintをセットアップする

まずはNuxtアプリを新規作成します。新規作成にはNuxi (Nuxt CLI)を利用します。

terminal
npx nuxi@latest init {app name}

初期アプリのセットアップ完了後、Nuxt ESLintを追加します。

terminal
npx nuxi@latest module add eslint

eslint.config.mjs.vscode/settings.jsonの設定を適宜行いセットアップは完了です。

Setup ESLint Stylistic, remove Prettier

それぞれのケースにおいてESLint Stylisticのセットアップを行います。

Nuxt ESLintの場合

ドキュメントはこちらです。Nuxt ESLintの場合、nuxt.config.tsを追加修正します。

https://eslint.nuxt.com/packages/module#eslint-stylistic

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/eslint'],
+ eslint: {
+   config: {
+     stylistic: {
+       semi: true,
+     },
+   },
+ },
});

もし全てデフォルト設定で良い場合は下記で問題ありません。

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/eslint'],
  eslint: {
    config: {
+     stylistic: true
    },
  },
});
ESLint Stylisticのデフォルト設定はこちら

@nuxt/eslint-configの場合

@nuxt/eslint-configの場合、eslint.config.mjsを修正します。 ドキュメントにこちらです。

https://eslint.nuxt.com/packages/config#eslint-stylistic

初稿の記載内容 (PR出してドキュメント追加しました)

こちらはドキュメントに記載がなかったのですが型情報を見る限り features Optionsの中にstylisticがありました。

https://github.com/nuxt/eslint/blob/7438c58ca01c4e4004c40ffbed0f5aef7c4d808a/packages/eslint-config/src/flat/types.ts#L21-L28

features Options内の設定方法は前項と同じです。

eslint.config.mjs
// @ts-check
import { createConfigForNuxt } from '@nuxt/eslint-config/flat';

export default createConfigForNuxt({
+ features: {
+   stylistic: {
+     semi: true,
+   },
+ },
}).append({
  ignores: ['**/coverage', '**/.vscode'],
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'error',
  },
});

おわりに

Nuxtユーザー待望のNuxt ESLintがリリースされ私は非常にワクワクしました。日々進化しているNuxtを観測するのはとても楽しいです🙌

Nuxt ESLintの登場は2024年4月初週であり1ヶ月しか経っていません。そのため、ESLint対応が間に合っていないNuxtモジュール、Nuxtアプリが多く存在することと思います。

「対応が間に合っていない = OSSコントリビュートの機運」だと思います。
この機会にNuxt ESLintやESLint Flat Configについて詳しくなり、OSSにコントリビュートしてみませんか?

Nuxtには Nuxters というOSSコントリビューター向けのプログラムがあります。Nuxtersについては別で解説記事を執筆致します。

関連

  • @nuxt/eslint-config内部で使用しているeslint-plugin-vueについての解説を下記記事で行っています。

https://zenn.dev/comm_vue_nuxt/articles/organize-eslint-rules-for-vue3-typescript

Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.

Discussion

Hidden comment