Next 12 で ESLint, Prettier, husky, lint-staged の環境構築

はじめに

こんにちは。ごはんを炊くのが面倒でジャガイモを蒸して主食にしている kimizuy です。

今回は Next12 のプロジェクトをベースに ESLint（next lint）と Prettier を使い、コミットする直前にステージされたファイルを検証・フォーマットする環境の構築方法について紹介します。

導入手順

さっそく、導入する手順を紹介します。

以下、手順を追って環境を構築していきますが、すでに環境構築済みのリポジトリも用意しています。

プロジェクトを作成する

create-next-app でプロジェクトを作ります。
プロジェクト名は next-ts-eslint-prettier-husky-lint-staged としました。

yarn create next-app --typescript
✔ What is your project named? … next-ts-eslint-prettier-husky-lint-staged

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

各パッケージをすべてインストールします。

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier husky lint-staged prettier

husky のセットアップ

husky の初期設定します。自動セットアップしてくれる便利なコマンドがあるのでそれを叩くだけです。

参考: https://typicode.github.io/husky/#/?id=automatic-recommended

npx husky-init && yarn

最終的に package.json は以下のようになります。

// package.json
{
  "name": "next-ts-eslint-prettier-husky-lint-staged",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "prepare": "husky install"
  },
  "dependencies": {
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "17.0.0",
    "@types/react": "17.0.37",
    "@typescript-eslint/eslint-plugin": "^5.7.0",
    "@typescript-eslint/parser": "^5.7.0",
    "eslint": "8.4.1",
    "eslint-config-next": "12.0.7",
    "eslint-config-prettier": "^8.3.0",
    "husky": "^7.0.0",
    "lint-staged": "^12.1.2",
    "prettier": "^2.5.1",
    "typescript": "4.5.4"
  }
}

次に .husky/pre-commit の内容を以下のように編集します。

pre-commit（コミットする直前）時に yarn lint-staged を実行するという内容です。

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-staged

ESLint のセットアップ

eslintrc.json に Prettier と TypeScript の設定を追加します。

下記リンクの設定をベースにして extends の最後に prettier を追加します。

参考: https://typescript-eslint.io/docs/linting/#configuration

最終的に eslintrc.json は以下のようになります。

// eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "prettier"
  ]
}

lint-staged のセットアップ

コミットする直前（pre-commit）にステージされたファイルに対して next lint と prettier --write をかけます。

Note: 少し前まで next lint はプロジェクト全体に対する検証しかできませんでしたが --file オプションが追加され、個別にファイルを検証することが可能になりました。

// .lintstagedrc.js
module.exports = {
  '**/*.{js,jsx,ts,tsx}': [
    (filenames) =>
      `next lint --fix --file ${filenames
        .map((file) => file.split(process.cwd())[1])
        .join(' --file ')}`,
    'prettier --write',
  ],
}

参考: https://nextjs.org/docs/basic-features/eslint#lint-staged

動作を確認する

以上ですべての環境構築が完了しました。

適当なコンポーネントファイル（pages/index.tsx とか）の JSX 内に以下のコードを挿入してみましょう。

<a href="/">home</a>

次のエラーが表示されるはずです。要約すると「クライアントルーティングには next/link を使え」と言われています。

Do not use the HTML <a> tag to navigate to /events/. Use Link from ‘next/link’ instead.
See: https://nextjs.org/docs/messages/no-html-link-for-pages.eslint@next/next/no-html-link-for-pages

このエラーが出たままのファイルをセーブしてコミットしてみましょう。yarn lint-staged → next lint → ESLint エラーとなり husky によってコミットが中断するはずです。

おわりに

「Next 12 で ESLint, Prettier, husky, lint-staged の環境構築」と題して、これらのライブラリを組み合わせた環境構築の手順についてご紹介しました。husky + lint-staged によって「コマンドの叩き忘れ」みたいなものを無くしていければいいですね。

以上、お読みいただきありがとうございました。