Next.js13の開発環境構築手順 step04 lint-stagedとhuskyを設定する

lint-stagedとhuskyをインストールする

以下のコマンドを実行します。

yarn add --dev lint-staged husky

huskyをセットアップする

「🐶 husky | 🐶 husky」に倣って、以下の通り実行しました。

npx husky-init && yarn

このとき、package.jsonとyarn.lockが更新されます。

また以下の .husky/pre-commit ファイルが、以下の記述内容で作成されます。

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

npm test

pre-commit時にlint-stagedを実行するように設定する

pre-commit時に npm test を実行したいわけではないので、実行するコマンドを変更します。

以下の通り、lint-stagedを実行するようにして、上書き保存します。

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

yarn lint-staged

stageされたファイルに対してnext lint, stylelint, prettierを実行するように設定

ファイルを作成します。

touch .lintstagedrc.js

以下の通り記述します。

const path = require('path');

const buildEslintCommand = (fileNames) => {
  const fileNamesStr = `--file ${fileNames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`;
  return `next lint --fix ${fileNamesStr}`;
};

const buildStylelintCommand = (fileNames) => {
  const fileNamesStr = fileNames
    .map((f) => `'${path.relative(process.cwd(), f)}'`)
    .join(' ');
  return `stylelint --fix ${fileNamesStr}`;
};

const buildPrettierCommand = (fileNames) => {
  const fileNamesStr = fileNames
    .map((f) => `'${path.relative(process.cwd(), f)}'`)
    .join(' ');
  return `prettier --write ${fileNamesStr}`;
};

module.exports = {
  '*.{js,jsx,ts,tsx}': [
    buildEslintCommand,
    buildStylelintCommand,
    buildPrettierCommand,
  ],
};

記述内容は以下のページを参考にさせていただきました。

• Configuring: ESLint | Next.js
• Next 12 で ESLint, Prettier, husky, lint-staged の環境構築 ++ Gaji-Laboブログ

動作確認

git commit してみると動作確認できると思います。

おわりに

Next.js 13の環境構築について書いてきました。

step05は書くかわかりませんが、このくらいで最低限の設定はできたかなー。という感じがしています。

テストや設計やその他諸々は、またぼちぼちブログに書いていけたらと思います。