はじめに
こんにちは、がんがんです。
2024 年 4 月、Nuxt から Nuxt ESLint というモジュールが公開されました。Nuxt ユーザー待望の All-in-one ESLint モジュールです。
本モジュールの登場により 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です。
Nuxt ESLint はESLint Config Inspector、ESLint Stylisticを作成されているAnthony Fu氏主導で作成されたものです。
Nuxt ESLint 開発の背景、Nuxt ESLint によって実現できるようになったことは Nuxt 公式ブログに詳しく記載されています。本モジュールの詳細説明は公式ブログの方が詳しいため下記ブログを合わせてご覧ください。
余談ですが ESLint Config Inspector については ESLint Blog に Anthony Fu 氏の記事がございます。非常に面白い内容となっているためご興味ある方は是非覗いてみてください。
本記事で取り扱う内容
本書では以下 3 パターンのセットアップを取り扱います。
- 既存 Nuxt アプリに Nuxt ESLint を導入する
-
@nuxt/eslint-configのバージョンアップのみ行う - 新規 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を利用しないため合わせて削除します。
rm .eslintrc* .eslintignore
続いて、@nuxt/eslintのインストール および ESLint のバージョンを更新します。@nuxt/eslint-configは@nuxt/eslintに内包されているため削除します。
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`のセットアップ
export default defineNuxtConfig({
+ modules: ['@nuxt/eslint'],
});
{
"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 ルールを有効にして使うことが多いです。
// @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
デフォルトで定義されている globals
もし追加でglobalsを設定する場合は以下のように設定すれば大丈夫です。
// @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`のセットアップ
{
"eslint.experimental.useFlatConfig": true
}
Update @nuxt/eslint-config@v3.x
前項では@nuxt/eslintモジュールを利用する場合のマイグレーションでした。本項では@nuxt/eslintモジュールを利用せず@nuxt/eslint-configのみをアップデートするケースです。
step1: update eslint, @nuxt/eslint-config
まずは@nuxt/eslint-configのアップデートを行います。
pnpm add -D eslint@latest @nuxt/eslint-config@latest
インストール完了後、以下のようになっていると思います。
{
"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()を用いている点が前項と異なる点です。
// @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)を利用します。
npx nuxi@latest init {app name}
初期アプリのセットアップ完了後、Nuxt ESLint を追加します。
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を追加修正します。
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ['@nuxt/eslint'],
+ eslint: {
+ config: {
+ stylistic: {
+ semi: true,
+ },
+ },
+ },
});
もし全てデフォルト設定で良い場合は下記で問題ありません。
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ['@nuxt/eslint'],
eslint: {
config: {
+ stylistic: true
},
},
});
ESLint Stylistic のデフォルト設定はこちら
@nuxt/eslint-configの場合
@nuxt/eslint-configの場合、eslint.config.mjsを修正します。 ドキュメントにこちらです。
初稿の記載内容 (PR 出してドキュメント追加しました)
こちらはドキュメントに記載がなかったのですが型情報を見る限り features Options の中にstylisticがありました。
features Options 内の設定方法は前項と同じです。
// @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についての解説を下記記事で行っています。
Discussion