【Next.js和訳】Basic Features/ESLint
この記事について
この記事は、Basic Features/ESLintの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
ESlint
バージョン11.0.0以降、Next.js は統合されたESLint体験をすぐに提供します。next lint
をスクリプトとしてpackage.json
に追加します。
"scripts": {
"lint": "next lint"
}
その後、npm run lint
またはyarn lint
を実行します。
yarn lint
まだ ESLint がアプリケーションに設定されていない場合は、インストールと設定の手順を説明します。
yarn lint
# You'll see a prompt like this:
#
# ? How would you like to configure ESLint?
#
# ❯ Base configuration + Core Web Vitals rule-set (recommended)
# Base configuration
# None
次の 3 つのうち、いずれかを選択できます。
- Strict: Next.js の基本的な ESLint の構成に加えて、より厳しいCore Web Vitalsのルールセットを含みます。開発者が初めて ESLint を設定するときに推奨される設定です。
{
"extends": "next/core-web-vitals"
}
- Base: Next.js のベースとなる ESLint の設定を含みます。
{
"extends": "next"
}
- Cancel: ESLint の設定を行いません。独自のカスタム ESLint コンフィギュレーションを設定する場合にのみ、このオプションを選択します。
2 つの設定オプションのいずれかが選択された場合、Next.js は自動的にeslint
とeslint-config-next
を開発用の依存関係としてアプリケーションにインストールし、選択した設定を含む.eslintrc.json
ファイルをプロジェクトのルートに作成します。
これで、ESLint を実行するたびにnext lint
を実行してエラーを検出できるようになります。ESLint が設定されると、毎回のビルド時にも自動的に実行されます(next build
)。エラーの場合はビルドに失敗しますが、警告の場合は失敗しません。
開発中にコードエディタで直接警告やエラーを表示するには、適切な統合機能を使用することをお勧めします。
ESlint の設定
デフォルトの設定(eslint-config-next
)には、Next.js で最適なリンティングを行うために必要なものがすべて含まれています。アプリケーションに ESLint が設定されていない場合は、next lint
を使用して、この設定と一緒に ESLint を設定することをお勧めします。
以下の ESLint プラグインの推奨ルールセットはすべてeslint-config-next
で使用されます。
eslint-config-next
パッケージでは、共有可能な設定の詳細を確認することができます。
これはnext.config.js
からの設定よりも優先されます。
ESlint プラグイン
Next.js では、esLint-plugin-next
という ESLint プラグインが基本構成にすでにバンドルされており、Next.js アプリケーションの一般的な問題や課題をキャッチすることができます。ルールの全容は以下の通りです。
ルール | 説明 |
---|---|
✔️ next/google-font-display | Google Fonts でオプションまたはスワップのフォント表示動作を強制する |
✔️ next/google-font-preconnect | Google Fonts でプリコネクト使用を強制 |
✔️ next/link-passhref | カスタムリンクコンポーネントで passHref プロップの使用を強制する |
✔️ next/no-css-tags | スタイルシートの手動タグを防ぐ |
✔️ next/no-document-import-in-page | pages/document.js 以外での next/document のインポートの禁止 |
✔️ next/no-head-import-in-document | pages/document.js における next/head のインポートを禁止する。 |
✔️ next/no-html-link-for-pages | Link コンポーネントを持たないページへの HTML アンカーリンクを禁止する。 |
✔️ next/no-img-element | HTML の<img> 要素の使用を禁止する。 |
✔️ next/no-page-custom-font | ページ限定のカスタムフォントの防止 |
✔️ next/no-sync-scripts | 同期スクリプトを禁止する |
✔️ next/no-title-in-document-head |
<title> を Head from next/document で使用することを禁止する。 |
✔️ next/no-unwanted-polyfillio | Polyfill.io のポリフィルの重複を防ぐ。 |
✔️ next/inline-script-id | インラインコンテンツを持つ next/script コンポーネントに id 属性を強制する。 |
✔️ next/no-typos | Next.js の data fetching 関数の宣言にタイプミスがないかどうか |
✔️ next/next-script-for-ga | スクリプトコンポーネントを使用して、スクリプトの読み込みを必要なときまで延期します。 |
- ✔️ : 推奨設定では有効
すでにアプリケーションに ESLint が設定されている場合は、いくつかの条件が揃わない限り、eslint-config-next
をインクルードするのではなく、このプラグインから直接拡張することをお勧めします。詳しくは「推奨プラグインのルールセット」を参照してください。
設定のカスタマイズ
rootDir
Next.js がルートディレクトリにインストールされていないプロジェクト(monorepo など)でeslint-plugin-next
を使用している場合、.eslintrc
のsettings
プロパティを使って、Next.js アプリケーションの場所をeslint-plugin-next
に伝えることができます。
{
"extends": "next",
"settings": {
"next": {
"rootDir": "/packages/my-app/"
}
}
}
rootDir
には、パス(相対パスまたは絶対パス)、グロブ(例:"/packages/*/"
)、またはパスやグロブの配列を指定します。
カスタムディレクトリのリンティング
デフォルトでは、Next.js はpages/
、components/
、lib/
の各ディレクトリにあるすべてのファイルに対して ESLint を実行します。しかし、プロダクションビルドではnext.config.js
のeslint
設定でdirs
オプションを使用して、どのディレクトリを実行するかを指定できます。
module.exports = {
eslint: {
dirs: ["pages", "utils"], // ビルド時に、「pages」と「utils」ディレクトリに対してのみESLintを実行するようにしました(next build)。
},
}
同様に、--dir
フラグは次のnext lint
にも使用できます。
next lint --dir pages --dir utils
キャッシング
パフォーマンスを向上させるために、ESLint が処理するファイルの情報はデフォルトでキャッシュされます。これは.next/cache
または定義されたビルドディレクトリに保存されます。1 つのソースファイルの内容以上に依存する ESLint ルールを含み、キャッシュを無効にする必要がある場合は、next lint
で--no-cache
フラグを使用します。
next lint --no-cache
ルールの無効化
サポートされているプラグイン(react
、react-hooks
、next
)が提供するルールを変更または無効にしたい場合は、.eslintrc
のrules
プロパティを使って直接変更できます。
{
"extends": "next",
"rules": {
"react/no-unescaped-entities": "off",
"@next/next/no-page-custom-font": "off"
}
}
コアウェブバイタル
next/core-web-vitals
ルールセットは、next lint
が初めて実行され、strictオプションが選択されたときに有効になります。
{
"extends": "next/core-web-vitals"
}
next/core-web-vitals
は、eslint-plugin-next
を更新し、Core Web Vitalsに影響を与える場合にデフォルトで警告となるいくつかのルールをエラーにしました。
Prettier との併用
ESLint にはコードフォーマットのルールが含まれており、既存のPrettierのセットアップと衝突する可能性があります。eslint-config-prettierを ESLint の設定に含めて、ESLint と Prettier を一緒に使うことをお勧めします。
{
"extends": ["next", "prettier"]
}
既存の設定を移行する
推奨されるプラグインのルールセット
すでにアプリケーションに ESLint が設定されていて、以下の条件が当てはまる場合。
- 以下のプラグインのうち 1 つ以上がすでにインストールされている(個別に、または
airbnb
やreact-app
などの別のコンフィグを介して)。react
react-hooks
jsx-ally
import
- Next.js 内で Babel が設定されている方法とは異なる特定の
parserOptions
を定義している(Babel の設定をカスタマイズしていない限り、これは推奨されません)。 -
eslint-plugin-import
がインストールされており、インポートを処理するために Node.js や TypeScript のリゾルバが定義されている。
これらのプロパティがeslint-config-next
内で設定されている方法を好む場合は、これらの設定を削除するか、代わりに Next.js の ESLint プラグインから直接拡張することをお勧めします。
module.exports = {
extends: [
//...
"plugin:@next/next/recommended",
],
}
このプラグインは、next lint
を実行しなくても、プロジェクトに普通にインストールできます。
npm install --save-dev @next/eslint-plugin-next
# or
yarn add --dev @next/eslint-plugin-next
これにより、同じプラグインやパーサーを複数の設定でインポートすることによる衝突やエラーが発生するリスクがなくなります。
追加のコンフィグレーション
すでに別の ESLint 設定を使用していて、eslint-config-next
を含める場合は、他の設定の後に最後に拡張するようにしてください。たとえば、以下のようになります。
{
"extends": ["eslint:recommended", "next"]
}
next
コンフィグレーションでは、parser
、plugins
、settings
の各プロパティのデフォルト値の設定がすでに行われています。ユースケースに応じて異なる構成が必要な場合を除き、これらのプロパティを手動で再宣言する必要はありません。他の共有可能な構成を含める場合は、これらのプロパティが上書きされたり変更されたりしないようにする必要があります。そうでない場合は、前述のように、next
コンフィグレーションと動作を共有する設定を削除したり、Next.js ESLint プラグインから直接拡張することをお勧めします。
Discussion