PrettierのPre-commit Hookを入れる正しいやり方

1. 概要

フォーマットが不正のソースコードをgitブランチに混入しないよう、PrettierのPre-commit Hookを使ってコミットする前に自動的にフォーマットを行いたい。

色んなweb記事やオフィシャルサイトに古い情報があるため、混乱してしまうが、2024年10月現在の正しいやる方をこの記事にまとめる

この記事はprettier設定が終わっていることを前提とする。

2. 予備知識

2-1. Pre-commit Hookはなに？

gitが色んなhook機能を提供されていて、その中の１つはPre-commitである。名前の通り、コミット前に指定された処理が実行される。

プロジェクト直下の.git/hooksフォルダに色んなhookの雛形があり、ファイル名の.sampleを消せば使える。

applypatch-msg.sample		fsmonitor-watchman.sample	pre-applypatch.sample		pre-merge-commit.sample		pre-rebase.sample		prepare-commit-msg.sample	sendemail-validate.sample
commit-msg.sample		post-update.sample		pre-commit.sample		pre-push.sample			pre-receive.sample		push-to-checkout.sample		update.sample

2-2. Huskyはなに？

git hooksは使い難いため、huskyが登場する。

huskyはJavaScriptライブラリであり、それをプロジェクトに入れると、.husky/pre-commitというファイルが作れて、そのファイルに記載するコマンドがcommit前に実行される。

git hooksのようなシェル処理を弄らず、JavaScriptコマンドだけでPre-commitできるのがhuskyの価値である。

2-3. lint-stageはなに？

gitやhuskyはデフォルトで全てのファイルが処理対象になるため、処理が時間かかる一方、無駄な作業になることが多い。

lint-stageはgit commitで変更したファイルのみを絞って、処理を行なうためのJavaScriptライブラリである。

3. PrettierのPre-commit Hookを入れる正しいやり方

3-1. huskyを入れる

huskyのオフィシャルdocsのインストール手順の通りでやると、最新のhusky v9のファイルが作られる。

npx husky init

• package.jsonにhuskyの内容が追加されること

{
  ...
  "scripts": {
    ...
    "prepare": "husky"
  },
  ...
  "devDependencies": {
    ...
    "husky": "^9.1.6",
    ...
  }
}

• .husky/pre-commitファイルが作成されること

npm test

npm installなどが実行すると、prepareスクリプトが自動的に呼ばれて、huskyが初期化される。

3-2. lint-stagedを入れる

npm install --save-dev lint-staged

3-3. .husky/pre-commitを変更

lint-stagedを呼ぶ出す

npx lint-staged

3-4. flat config形式のlint-staged設定ファイルをプロジェクト直下に作成

• lint-staged.config.mjs

const config = {
  '*.css': ['stylelint --fix', 'prettier --write'],
  '*.{ts,tsx,mjs}': ['eslint --fix', 'prettier --write'],
  '*.{json,md,html}': ['prettier --write'],
};

export default config;

stylelintやeslintとprettierを行なう例であるが、必要によって設定を変更する。

4. あと書き

JavaScriptライブラリはお互いに綿密に依存している一方、各自の進化も早いため、それに関するweb記事があっという間に臭くなる。

4-1. Prettierのlint-stagedでやる手順の問題点

Prettierオフィシャルdocに書いてあるが、npx mrm@2 lint-staged一発で全ての依存が完璧に用意される。

• 問題点１
  • mrm@2は古い、最新はv4系のmrm@4である
• 問題点２
  • npx mrm lint-stagedでやってもhusky v8形式なファイルが生成される
  • しかし、husky v9がdevDependenciesに入っている
  • prepareがhusky installである
  • husky v9が欲しいprepareはhuskyであるため、install command is DEPRECATED警告が出る
    • 設定とコマンドの不一致は最悪

husky v9の変更点はこちら

4-2. 区別にくい古いhuskyのインストールコマンド

husky v9のnpm husky initとよく似ってるコマンドnpx husky-initがある。

npx husky-initでやるとhusky v8が使われてしまう。

• 依存ライブラリがv8
• pre-commitファイルがv8の形式
• 最新版でないため気持ち悪い