Zenn
Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.Publicationへの投稿
💚

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

GANGAN
2024/05/14に公開
1件
Nuxt
TypeScript
Vue.js
ESLint
Nuxt 3
tech

はじめに

こんにちは、がんがんです。
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 Inspector、ESLint 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のセットアップを行います。こちらはご自身の設定に合わせて変更してください。
.nuxtはnuxt 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.browserやenv.nodeは@nuxt/eslint-configで設定済みのため追加設定は行なっていません。また、ignoresについてもデフォルト未定義のものを追加しています。

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

https://github.com/nuxt/eslint/blob/7438c58ca01c4e4004c40ffbed0f5aef7c4d808a/packages/eslint-config/src/flat/configs/ignores.ts

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

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

もし追加で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 のデフォルト設定はこちら

https://github.com/eslint-stylistic/eslint-stylistic/blob/1d3d47ca23ed724210b57440d34b3c3df14079c0/packages/eslint-plugin/configs/customize.ts#L7-L77

@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.
Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.Publication

「Vue / Nuxt利用者が気軽に情報を得ることができ、またVue / Nuxt初学者がまずここを訪ねてみる」 と思える、そんなVue / Nuxtの情報が集まる広場。ハードルは低く、わちゃわちゃと知見が集まる広場へ。 ✍️ Articles: Vue, Nuxt, related libraries

Discussion

Hidden comment