Nuxt ESLint統合の刷新版
TL;DR
新しいフラット構成でESLint v9をサポートするために、ESLint統合を刷新しました。その過程で、よりパーソナライズされ、強力で、開発者エクスペリエンスの向上を実現する多くの可能性を探求しました。
新しい@nuxt/eslint モジュールをインストールするには、次のコマンドを実行します。
npx nuxi module add eslint
記事を読み進めるか、ドキュメントで詳細を確認してください。
背景
ESLintは、今日のWeb開発において不可欠なツールとなっています。プロジェクトにおけるエラーの検出と、一貫性のあるコーディングスタイルの適用に役立ちます。Nuxtでは、ESLintを簡単に使用、設定し、推奨されるベストプラクティスに従えるよう、すぐに使えるエクスペリエンスを提供することに尽力しています。
NuxtとESLintの両方が大きく進化したためです。歴史的に、NuxtにおけるESLintにはいくつかの異なるパッケージと統合が存在していました。そのため、どのパッケージをどの目的に使用するべきかが常に明らかではありませんでした。コミュニティから多くのフィードバックを受けました。
状況を改善し、将来性も確保するために、最近、ESLint v9とフラット構成をサポートするようにESLint統合を刷新しました。これにより、ESLint設定のカスタマイズの可能性が大幅に広がり、よりシンプルで統一されたエクスペリエンスが提供されます。
Nuxt ESLint モノレポ
異なるリポジトリに分散していたESLint関連のパッケージを、単一のモノレポ:nuxt/eslintに移行し、専用の新しいドキュメントサイト:eslint.nuxt.comを作成しました。
各パッケージの違いと使用方法を理解するために、それらを比較し、スコープを説明するFAQページも用意しました。
このモノレポには、以下が含まれています。
@nuxt/eslint- Nuxt 3向けの新しいオールインワンのESLintモジュールで、プロジェクト認識型ESLintフラット構成などをサポートします。@nuxt/eslint-config- Nuxt 3向けの、意見のないがカスタマイズ可能な共有ESLint構成。 フラット構成形式とレガシー形式の両方をサポートします。@nuxt/eslint-plugin- Nuxt 3向けのESLintプラグインで、Nuxt固有のルールと構成を提供します。- メンテナンスモードのNuxt 2向けパッケージ2つ。
ESLintフラット構成
新しいNuxt統合について詳しく説明する前に、ESLintフラット構成の概念を紹介します。
フラット構成は、ESLint v8.21.0で実験的な構成形式として導入され、ESLint v9でデフォルトの形式になりました。
違いを簡単に示します。
- フラット構成:
eslint.config.jseslint.config.mjsなど - レガシー構成:
.eslintrc.eslintrc.json.eslintrc.jsなど
なぜフラット構成なのか？
ESLintのこのブログ投稿では、フラット構成システムの背後にある動機について詳しく説明しています。簡単に言うと、レガシーeslintrc形式はJavaScriptの初期に設計されたもので、ESモジュールと最新のJavaScript機能はまだ標準化されていませんでした。多くの暗黙的な規則があり、extends機能により、最終的な構成結果を理解し予測することが困難になります。そのため、共有構成の保守とデバッグも困難になります。
{
"extends": [
// Solve from `import("@nuxtjs/eslint-config").then(mod => mod.default)`
"@nuxtjs",
// Solve from `import("eslint-config-vue").then(mod => mod.default.configs["vue3-recommended"])`
"plugin:vue/vue3-recommended",
],
"rules": {
// ...
}
}
新しいフラット構成では、プラグインと構成の解決をESLintの内部規則からネイティブのESモジュール解決に移行します。これにより、より明示的で透明になり、他のモジュールからもインポートできるようになります。フラット構成は単なるJavaScriptモジュールであるため、カスタマイズの可能性も大幅に広がります。
フラット構成のためのNuxtプリセット
最新の@nuxt/eslint-configパッケージでは、構成プリセットをより高度な方法で簡単にカスタマイズできるファクトリー関数を活用しています。使用方法の例を以下に示します。
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
export default createConfigForNuxt()
@nuxt/eslint-configは、意見のない基本構成から始まります。つまり、TypeScript、Vue、Nuxtのベストプラクティスに関するルールのみを含み、コードスタイル、フォーマットなどはユーザーが決定できるようにしています。デフォルト設定でPrettierと併用してフォーマットすることもできます。
この構成では、必要に応じてより意見のある機能をオプトインできます。たとえば、ESLintにフォーマットも処理させたい場合は、ファクトリー関数にfeatures.stylisticを渡して有効にできます（ESLint Stylisticを使用）。
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
export default createConfigForNuxt({
features: {
stylistic: true
}
})
または、オプションオブジェクトを使用して設定を調整できます（オプションの詳細はこちら）。
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
export default createConfigForNuxt({
features: {
stylistic: {
semi: false,
indent: 2, // 4 or 'tab'
quotes: 'single',
// ... and more
}
}
})
Nuxtモジュールを作成している場合は、features.toolingを有効にして、Nuxtモジュール開発用のルールを有効にできます。
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
export default createConfigForNuxt({
features: {
tooling: true
}
})
…など。フラット構成のファクトリー関数は、プリセットによって基礎となるESLint構成の複雑さをカバーし、エンドユーザーがカスタマイズするための高度でユーザーフレンドリーな抽象化を提供します。これにより、ユーザーは内部の詳細を気にする必要がありません。
このアプローチでは、使いやすさを実現するシンプルさと高度な抽象化、そしてカスタマイズと微調整のための機能性の両方を備えています。(Prettierのような最小限の設定でPrettierのようなエクスペリエンスを提供しますが、必要に応じて細かいルールやプラグインをカスタマイズして上書きすることもできます)
FlatConfigComposerユーティリティをeslint-flat-config-utilsから作成して、フラット構成の上書きと拡張をさらに容易にしました。@nuxt/eslint-config/flatのファクトリー関数はFlatConfigComposerインスタンスを返します。
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
export default createConfigForNuxt({
// ...options for Nuxt integration
})
.append(
// ...append other flat config items
)
.prepend(
// ...prepend other flat config items before the base config
)
// override a specific config item based on their name
.override(
'nuxt/typescript', // specify the name of the target config, or index
{
rules: {
// ...override the rules
'@typescript-eslint/no-unsafe-assignment': 'off'
}
}
)
// an so on, operations are chainable
このアプローチにより、使いやすさと高度な抽象化によるシンプルさと、カスタマイズと微調整のための機能性の両方のメリットを得ることができます。
Nuxt ESLintモジュール
さらに一歩進んで、Nuxt 3向けの新しいオールインワンの@nuxt/eslintモジュールを作成しました。Nuxtのコンテキストを活用して、プロジェクト固有で型安全なESLint構成をプロジェクト用に生成します。
プロジェクト認識型ルール
Vueのスタイルガイドでは、既存および将来のHTML要素との競合を避けるために、コンポーネントに複数単語の名前を使用することを推奨しています。そのため、eslint-plugin-vueでは、vue/multi-word-component-namesルールがデフォルトで有効になっています。これは従うべき優れたプラクティスですが、Nuxtプロジェクトでは、すべての.vueファイルがコンポーネントとして登録されているわけではありません。app.vue、pages/index.vue、layouts/default.vueなどは、他のVueファイルではコンポーネントとして使用できないため、このルールはそれらには無関係です。
通常、これらのファイルに対してルールを無効にできます。
export default [
{
files: ['*.vue'],
rules: {
'vue/multi-word-component-names': 'error'
}
},
{
files: ['app.vue', 'error.vue', 'pages/**/*.vue', 'layouts/**/*.vue'],
rules: {
// disable the rule for these files
'vue/multi-word-component-names': 'off'
}
}
]
これはほとんどの場合に有効ですが、Nuxtでは各ディレクトリのパスをカスタマイズでき、レイヤーを使用すると、各ディレクトリに複数のソースを持つことができます。つまり、リンターのルールは正確性が低くなり、ユーザーがそれらを**手動で**整合させるための余分な労力が発生する可能性があります。
同様に、vue/no-multiple-template-rootをpagesやlayoutsなどに対してのみ有効にしたいと考えています。ケースが増えるにつれて、ユーザーにルールを手動で管理させることは非現実的になります。
@nuxt/eslintの魔法はこの点で役立ちます！Nuxtのコンテキストを活用して、プロジェクト構造に固有の構成とルールを生成します。.nuxt/tsconfig.jsonがNuxtによって提供されるのと同様に、プロジェクト認識型の.nuxt/eslint.config.mjsも拡張できるようになりました。
これを使用するには、Nuxtプロジェクトにモジュールを追加します。
npx nuxi module add eslint
Config Inspector DevTools統合
新しいフラット構成への移行と調査中に、フラット構成のインタラクティブなUIインスペクターを作成し、構成をより透明で理解しやすくするというアイデアを思いつきました。@nuxt/eslintモジュールがインストールされている場合は、Nuxt DevToolsに統合されているため、必要に応じて簡単にアクセスできます。
このインスペクターを使用すると、有効になっている最終的な解決済み構成、ルール、プラグインを確認し、ルールと構成が特定のファイルにどのように適用されているかを確認できます。これは、デバッグや、プロジェクトでのESLintの動作方法を学習するのに役立ちます。
ESLintチームもこれを有用であると判断し、より広範なESLintコミュニティで利用できることに関心を持っていることを嬉しく思っています。その後、私たちは共同で取り組み、公式のESLint Config Inspectorを作成しました（ちなみに、Nuxtを使用して構築されています）。この発表記事で詳細を確認してください。
ルールのための型生成
ESLintの設定における主な問題点の1つは、ルールと構成に関する型情報の不足でした。特定のルールで使用できるオプションを知ることは難しく、それを知るためには、すべてのルールのドキュメントを参照する必要がありました。
新しいフラット構成が多くの可能性を秘めて動的であることに改めて感謝します。eslint-typegenという新しいツールを考案しました。これにより、**使用している実際のプラグインに基づいて**、各ルールのルール構成スキーマから対応する型を生成できます。つまり、これはあらゆるESLintプラグインで機能する普遍的なソリューションであり、型は常に正確で最新の状態に保たれます。
@nuxt/eslintモジュールでは、この機能がすぐに使用できるようになっています。
デベロッパーサーバーチェッカー
新しいモジュールでは、@nuxtjs/eslint-moduleとESLintのデベロッパーサーバーチェッカーを新しい@nuxt/eslintモジュールにオプトイン機能としてマージしました。
有効にするには、モジュールオプションでcheckerオプションをtrueに設定します。
export default defineNuxtConfig({
modules: [
'@nuxt/eslint'
],
eslint: {
checker: true // <---
}
})
ESLintエラーが発生すると、コンソールとブラウザに警告が表示されます。この機能の詳細については、ドキュメントを参照してください。
モジュールフック
コード生成機能とプロジェクト認識の設定を持つNuxtモジュールを使用しているため、これによりさらに多くの興味深いことができます。1つは、モジュールがESLintの設定にも貢献できるようにすることです。将来、@nuxtjs/i18nのようなNuxtモジュールをインストールすると、i18n関連ファイルに特定のESLintルールを自動的に有効にできるようになることを想像してください。または、@pinia/nuxtのようなものをインストールすると、Piniaのベストプラクティスを強制するためのPinia ESLintプラグインをインストールできるなどです。
実験として、Nuxtプロジェクトに登録されている自動インポートを事前に設定されたESLintプリセットで自動挿入できるモジュールnuxt-eslint-auto-explicit-importを作成しました。これにより、APIの使用時に自動インポートで同じ優れた開発者エクスペリエンスを得ることができ、コードベースには自動挿入された明示的なインポートが依然として存在します。
これはまだ初期段階であり、可能性とベストプラクティスを調査中です。しかし、その可能性と機会に非常に興奮しています。コミュニティと協力して、最大限に活用する方法を探っていきます。アイデアやフィードバックがあれば、お気軽にご共有ください！
エコシステム
Nuxtでは、常にエコシステムとコミュニティを重視しています。新しいフラット構成を採用し、開発者エクスペリエンスを向上させるための調査中に、その目標を達成するための多くのツールを作成しました。それらのすべては汎用であり、Nuxt以外でも使用できます。
@eslint/config-inspector- 公式ESLint構成インスペクターは、構成のためのインタラクティブなUIを提供します。eslint-typegen- 使用している実際のプラグインに基づいて、ESLintルールのTypeScript型を生成します。eslint-flat-config-utils- ESLintフラット構成の管理と構成のためのユーティリティ。
私たちは、より広いコミュニティをサポートし、開発者と協力してこれらのツールを改善し、その可能性を拡大することに取り組んでいます。これらのツールがESLintエコシステムにどのように役立ち、全体的な開発者エクスペリエンスに貢献するかを見ることに興奮しています。
将来
今後、ESLintエコシステムがどのように進化し、新しい機能と可能性をどのように活用してNuxtの開発者エクスペリエンスをさらに向上させることができるかを見ていくことを楽しみにしています。Nuxtユーザーにとってシームレスで強力な開発環境を提供することに専念しており、この目標を達成するために、新しいアイデアを探求し、コミュニティと協力し続けます。