Zenn
🚀

Next.jsプロジェクトにESLintを導入する

2021/06/19に公開
Next.js
ESLint
tech

はじめに

Next.js@11.0.0からESLintが非常に簡単に導入できるようになりましたね。
今回はNext.jsプロジェクトにESLintを導入する手順と基本設定について書いていきたいと思います（といってもほとんど公式ドキュメントの翻訳になりますが）。

導入手順

  1. Next.js@11.0.0以上にアップグレード
  2. npm scriptsをpackage.jsonに追加
  3. 必要なパッケージをインストール
  4. .eslintrcを追加

Next.js@11.0.0以上にアップグレード

ここでは詳細な手順は省きますが、こちらのドキュメントなどを参考にアップグレードを行ってください。

npm scriptsをpackage.jsonに追加

package.json
"scripts": {
  "lint": "next lint"
}

必要なパッケージをインストール

yarn add --dev eslint eslint-config-next

.eslintrcを追加

.eslintrc
{
  "extends": "next"
}

以上で導入は完了です。
あとはエディタで編集中に警告やエラーを表示してくれるようにプラグインを入れておくと良いと思います。

基本設定

特定のディレクトリのみ対象にする

デフォルトのチェック対象は以下の3つのディレクトリです。

  • components/
  • lib/
  • pages/

ディレクトリ構成を変更しているような場合はnext.config.jsに以下の設定を追加します。

next.config.js
module.exports = {
  eslint: {
    dirs: ['src/components/', 'src/lib/', 'src/pages/']
  },
}

また、CLIで特定のディレクトリのみ対象にしたい場合は--dirフラグを指定します。

yarn lint --dir src/components/ --dir src/lib/ --dir src/pages/

特定のルールを無効化する

特定のルールを無効化したい場合は.eslintrcに以下のように設定を追加します。

.eslintrc
{
  "extends": "next",
  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off",
  }
}

Core Web Vitalsのルールを追加する

Core Web Vitalsのルールを追加したい場合は.eslintrcに以下の設定を追加します。

.eslintrc
{
  "extends": ["next/core-web-vitals"]
}

Prettierと一緒に使用する

Prettierのフォーマットルールとコンフリクトしてしまう場合はeslint-config-prettierをインストールして、.eslintrcに以下の設定を追加します。

yarn add --dev eslint-config-prettier
.eslintrc
{
  "extends": ["next", "prettier"]
}

ビルド時にチェックを実行しない

TypeScriptの型エラーがあるとビルドが失敗するのと同様に、デフォルトではESLintのエラーがあるとビルドが失敗します。

これを防ぎたい場合はnext.config.jsに以下の設定を追加します。

next.config.js
module.exports = {
  eslint: {
    ignoreDuringBuilds: true,
  },
}

おまけ（ESLintがちゃんと動いているか確認してみる）

ここでESLintがちゃんと動いているか確認してみましょう。

チェック対象のファイルに以下を追加します。

hoge.ts
export default () => {}

保存してyarn lintを実行すると以下の警告が発生するはずです。

Warning: Assign arrow function to a variable before exporting as module default

おわりに

いかがでしたでしょうか。非常に簡単にESLintが導入できました。
僕自身これまでESLintの設定が非常にめんどくさくて難しくて二の足を踏んでいた部分があったのでありがたかったです。Next.jsに特有の設定が追加されているのもありがたいですね。
それではよいNext.jsライフを！

Discussion