はじめに
こんにちは、がんがんです。
2025年2月に Nuxt ESLint v1 がリリースされ、2025年4月末現在の最新は v1.3.0 です。
以前執筆した記事から1年近く経ちその間にメジャーバージョンが更新されました。前回の記事はこちらです。
Nuxt ESLint v1がリリースされたこのタイミングで Nuxt v3 における ESLint 設定を改めて整理しなおしたいと思います。
Vue.js / Nuxt 関連のESlint pluginが気になる方はこちらも合わせてご覧ください。
Nuxt ESLintのドキュメントはこちらです。公式ドキュメントと照らし合わせて本記事をご覧ください。
本記事の想定読者
- Nuxt v3 で ESLint の設定を行いたいが設定方法が分からない
- Nuxt ESLint module、Nuxt ESLint config、Nuxt ESlint plugin の違いを知りたい
- Nuxt ESLint のルールを拡張したいが設定方法が分からない
本記事ではレガシーバージョンからのマイグレーションの紹介は行なっていません。コメント等で要望あれば執筆します！
本記事の環境
以下のバージョンで話を進めます。
- Nuxt : v3.17 (v2系は対象外)
- Nuxt ESLint module: v1.3.0
- Nuxt ESLint config: v1.3.0
- ESLint : >= v9.0.0
- Nuxt ESLint は Flat config format をサポートしています。そのため、Flat configがサポートされている v8.45.0 以降の利用を推奨しています。
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.
Q1. Nuxt ESLint module、Nuxt ESLint config、Nuxt ESlint plugin はそれぞれどう違うのか
- Nuxt ESLint module: Nuxt ESLint config + Nuxt ESLint pluginが一体化したオールインモジュール。他のNuxt moduleと同じ利用方法が取れる
- Nuxt ESLint config: Nuxt で利用されるESLint configの集合体。eslint-plugin-vue、typescript-eslint など Nuxt アプリ開発者が設定するルール・プラグインを (ほぼ) Zero Configuration で設定可能となる
- Nuxt ESLint plugin: Nuxt 固有のルールをまとめたプラグイン。
上記の違いを図にすると以下の通りです。矢印の上部がNuxt v3対応、下部がNuxt v2対応となります。
Q2. moduleとconfig、どのように使い分けるべきか？
Nuxt ESLintを初めて設定する人は1つの疑問が生まれます。
「Nuxt ESLint module、Nuxt ESLint config、どちらを設定した方が良いのか」 です。
まずはそれぞれの設定方法をみてみます。
それぞれの設定方法を比較する
まずはNuxt ESLint configを利用したケースです。
// @ts-check
import { createConfigForNuxt } from '@nuxt/eslint-config/flat';
export default createConfigForNuxt({
features: {
stylistic: true
}
});
続いてNuxt ESLint moduleを利用したケースです。
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs';
export default withNuxt({});
export default defineNuxtConfig({
modules: ['@nuxt/eslint'],
eslint: {
config: {
stylistic: true
}
}
});
ESLint configを利用する場合はeslint.config.mjsのみ設定を行い、ESLint moduleを利用する場合はeslint.config.mjs、nuxt.config.tsをそれぞれ設定します。
ポイントは import withNuxt from './.nuxt/eslint.config.mjs' です。
Nuxtは nuxt prepare コマンド実行時に .nuxt/* を生成しています。Nuxt ESLint moduleは nuxt prepare 実行時に eslint.config.* も合わせて生成しています。
Nuxt ESLint configは静的、Nuxt ESLint moduleは動的な管理を行うことが可能となります。
どのように使い分けるのか
それぞれのユースケースを比較してみます。
1. ESLintの設定を公式に全部お任せしたい
この場合は Nuxt ESLint module を利用すると良いでしょう。
Nuxt関連の設定はAll-in-oneで設定されており公式の設定に準拠することが可能です。
Nuxt ESLint modulueはモジュールのため開発時に動作します。開発時にコードの不備を早期チェックできる点が魅力です。
2. 従来通りCI/CDでESLintのチェックを行いたい
eslintコマンドを用いてCI/CD上でチェックを実施しているプロダクトも多いと思います。この場合は従来通りeslintコマンドを利用できる Nuxt ESlint config の方が良いでしょう。
既存Nuxtアプリが存在し、Nuxt ESLintもv3用のマイグレーションしたいケースではESLint configの方が適していることが多いです。
例えば、レバテックさんではNuxt ESLint moduleよりもNuxt ESLint configを利用した方がマッチしていました。
case: ganganはどのように設定しているのか
私は以下の観点からNuxt ESLint configを採用しています。
- ESLint config は静的に管理したい。また自分以外の人にもコーディングルールを明示し共有したい
- nuxt.config.tsにESLintオプションを追加してFatにしたくない
ESLint config はコード品質を維持するために必要な設定ファイルです。そのため、コーディングルールの共有やチーム内でのルール明示として振る舞いがさせたいです。ESLint設定は高頻度で変更を加えるものでもないため nuxt prepare 実行毎に動的生成する必要はないと考えています。
また、Nuxt configに限らず設定ファイルは常に肥大化する危険性があります。
管理・更新効率を考え可能な限りNuxt configを肥大化させない方向で設定したいと考えています。
参考までに普段利用しているeslint.config.mjsを添付します。
ESLint の設定を行う
設定だけ閲覧したい方はお待たせしました。それぞれの設定を見ていきます。
case1: Nuxt ESLint config を用いた ESLint の設定
まずはNuxt ESLint configを用いた設定例です。
// @ts-check
import { createConfigForNuxt } from '@nuxt/eslint-config/flat';
export default createConfigForNuxt({
features: {
stylistic: {
semi: true,
quotes: 'single'
}
}
})
.override('nuxt/vue/rules', {
rules: {
'vue/max-attributes-per-line': ['error', { singleline: { max: 3 } }]
}
});
ESLint Stylisticに関する設定はfeatures.stylisticオプションから設定可能です。上記の例では「セミコロン必須、クォートはシングルを利用」を設定しています。
ESLint Stylisticについての公式ドキュメントは以下を参照ください。
case2: Nuxt ESLint module を用いたESLintの設定
続いてNuxt ESLint moduleを用いた設定例です。 createConfigForNuxt()から withNuxt()に変更されています。設定内容は特に変化していません。
// @ts-check
+ import withNuxt from './.nuxt/eslint.config.mjs';
- import { createConfigForNuxt } from '@nuxt/eslint-config/flat';
+ export default withNuxt({
- export default createConfigForNuxt({
- features: {
- stylistic: {
- semi: true,
- quotes: 'single'
- }
- }
})
.override('nuxt/vue/rules', {
rules: {
'vue/max-attributes-per-line': ['error', { singleline: { max: 3 } }]
}
});
ESLint Stylisticの設定は nuxt.config.ts 側に移行しています。
export default defineNuxtConfig({
+ modules: ['@nuxt/eslint'],
+ eslint: {
+ config: {
+ stylistic: {
+ semi: true,
+ quote: 'single'
+ }
+ }
+ }
});
Nuxt ESLint の設定を拡張する
Nuxt ESLintはAnthony Fu氏が主導で開発を行なっています。
そのため、Nuxt ESLintではAnthony Fu氏が開発しているeslint-flat-config-utilsを用いてESLint configの拡張が可能です。
1. Vue rules を拡張する
Vue.jsに関するルールはnuxt/eslint/packages/eslint-config/src/configs/vue.tsで管理されています。
vue-eslint-parserなどもこちらで適用されておりユーザー側は設定不要で利用することができます。今回は以下のようにvue/max-attributes-per-lineを拡張して設定します。
export default createConfigForNuxt({
// ...other settings
})
+ .override('nuxt/vue/rules', {
+ rules: {
+ 'vue/max-attributes-per-line': ['error', { singleline: { max: 3 } }]
+ }
});
eslint-plugin-vue-scoped-cssルールを.vueファイルに適用する場合は以下のように設定が可能です。
+ import pluginVueScopedCss from 'eslint-plugin-vue-scoped-css';
export default createConfigForNuxt({
// ...other settings
})
.override('nuxt/vue/rules', {
rules: {
'vue/max-attributes-per-line': ['error', { singleline: { max: 3 } }],
+ ...pluginVueScopedCss.configs['flat/recommended'].rules
}
});
2. TypeScript ruleを拡張する
続いてTypeScript ruleを拡張します。TypeScriptに関するルールはnuxt/eslint/packages/eslint-config/src/configs/typescript.tsで管理されています。
以下では@typescript-eslint/no-unused-varsルールをERRORからWARNに変更しています。
export default createConfigForNuxt({
// ...other settings
})
+ .override('nuxt/typescript/rules', {
+ rules: {
+ '@typescript-eslint/no-unused-vars': 'warn'
+ }
});
3. Other ESLint pluginを追加したい
上記2つはrulesの追加のみでした。しかしlanguageOptions、files設定をプラグインの推奨通り利用したいケースもあります。その場合は.append()を用いて追加します。
+ import pluginJsonc from 'eslint-plugin-jsonc';
+ import pluginYml from 'eslint-plugin-yml';
export default createConfigForNuxt({
// ...other settings
})
+ .append(
+ ...pluginYml.configs['flat/recommended'],
+ ...pluginJsonc.configs['flat/recommended-with-json']
+ );
4. ルールを削除したい
ルールのoffではなくルールを完全に削除したいケースもあります。この場合は.removeRules()を利用することでルールの削除が可能です。composerのREADMEには以下のように記述されています。
This helper removes specified rules from all configurations in the composer. It is useful when you are certain that these rules are not needed in the final configuration. Unlike overriding with off, removed rules are not affected by priority considerations.
Nuxt ESLint plugin にはどんなルールがあるのか？
2025年4月現在のNuxt ESlint pluginには以下のルールが用意されています。
- prefer-import-meta
- nuxt-config-keys-order
prefer-import-metaはprocess.*をimport.meta.*に変更するように指摘するルール、nuxt-config-keys-orderはnuxt.config.ts内のソートを実施するルールです。
Nuxt ESLint pluginの随時コントリビューターを募集しています。ASTに入門し一緒に便利なNuxt開発ライフを送りませんか。
おわりに
Nuxt ESLint についての整理を行いました。Nuxt ESLintの整備は今まで課題とされてきましたがAnthony Fu氏のおかげで劇的に改善しました。
しかし公式ドキュメント不十分さや日本語/英語の利用記事が少ないなど、Nuxt および Nuxt ESLint に関する情報が足りていないのが現状です...
Nuxt v3 における ESLint 事例をお持ちの方は是非ご一筆いただけると嬉しいです。
私も知らないような設定に出会えることを楽しみにしてます🙌
本記事では記事が重たくなってしまうことを避けるためJSDocに関連する設定を省いています。
こちらについて別途記事を執筆したいと思います。
Discussion