Next.js を快適に開発するための ESLint と Prettier
Next.js を TypeScript で開発する際に ESLint と Prettier を設定する方法を紹介します。
Vercel が掲げる "Zero Config" のコンセプトを踏襲して、シンプルで効果的な設定を紹介します。
これらの設定は少し繊細な部分があって、正しく設定されていないと開発体験が悪くなることもあります。実際に私たちのチームでもこれらの設定が複雑化・陳腐化してしまい正しく動作しないことがありました。開発環境を改善するため、ESLint とその周辺ライブラリ・プラグインの設定を見直すことにしました。
これらのライブラリやプラグインは歴史が長く、その設定方法を何度も変えてきた経緯があり、同時にベストプラクティスも変化してきた経緯があります。しかし、Next11 以降は next lint によって ESLint の設定は簡略化（隠蔽）しているので、以前のような複雑な設定はいらなくなりました。
設定方法
Setup Next.js
Next.js は create-next-app を使うことでインタラクティブに環境構築できます。オフィシャルにメンテナンスされているので安心です。
npx create-next-app@latest --ts --eslint
Configure ESLint
TypeScript に最適化された ESLint のルールとコードスタイリングツールである Prettier をインストールします。
npm install --save-dev @typescript-eslint/eslint-plugin eslint-config-prettier prettier
.eslintrc.json を以下のように書き換えます。extends の順序に注意してこれらのプラグインを追記します。
{
"extends": [
+ "plugin:@typescript-eslint/recommended",
"next/core-web-vitals"
+ "prettier"
]
}
あとは IDE があなたの好ましいタイミングで next lint や prettier コマンドを実行するように設定してください。
ここから先は上記の各々の設定が何を意味しているのかもう少し詳しく解説します。設定をアレンジしたくなった場合は参考にしてください。
Next.js with ESLint
create-next-app は eslint-config-next パッケージをインストールします。eslint-config-next は Next.js に最適化された ESLint の設定を代行するパッケージです。eslint-plugin-next を含む様々な ESLint プラグインを設定してくれます。.eslintrc.js で指定されている next/core-web-vitals は eslint-plugin-next プラグインで定義されています。
なお、eslint の設定を自分でアレンジする場合は、eslint-config-next と干渉しないように気を付ける必要があります。
ESLint with TypeScript
next/core-web-vitals には TypeScript に関するルールが含まれません。
そこで @typescript-eslint/eslint-plugin を追加しました。
{
"extends": [
+ "plugin:@typescript-eslint/recommended",
"next/core-web-vitals"
],
}
プラグインの設定順序などは Next.js のドキュメントを参考にしてください。
なお、@typescript-eslint/parser は eslint-config-next で設定されます。
ESLint with Prettier
ESLint はコード整形ツールとして利用することもできます。つまり、ESLint に設定できるコーディング規約にはコードスタイルに関するものも多く含まれます。もし ESLint と Prettier の設定に矛盾がある状態で両者を同時に使用すると、ESLint と Prettier はお互いの修正を修正しあう競合状態になり開発体験が悪くなります。
ESLint と Prettier を同時に使用する場合は、両者の責務を分離する必要があります。具体的には、ESLint に eslint-config-prettier プラグインを設定することで、ESLint のコードスタイルに関するルールを無効化しています。これにより、コード品質の担保は ESLint が、コードの整形は Prettier がそれぞれ専任して担当するようになります。
{
"extends": [
"plugin:@typescript-eslint/recommended",
"next/core-web-vitals"
+ "prettier"
]
}
プラグインの設定順序はドキュメントを参考にしてください。
Discussion