Zenn
👻

レフトフックの設定ファイル解説 🚀

に公開
Git
初心者
pre-commit
commit-msg
Lefthook
tech

📝 lefthook.yml の各セクションの解説

1. pre-commit（コミット前フック） 🎣

このセクションでは、コミットが行われる直前に実行されるコマンドを定義します。parallel: trueなので、定義された各コマンドは並行して実行されます。これにより、複数の処理を同時に行い、時間を節約できます。⏱️

  • commands: 実行するコマンドのリストです。

    • lint:

      • glob: "*.{js,ts,jsx,tsx}"：このコマンドは、.js, .ts, .jsx, .tsx の拡張子を持つファイルに対して実行されます。つまり、JavaScriptやTypeScriptのファイルが対象です。💡
      • run: npx eslint {staged_files}：eslintを使って、ステージングされている（コミット対象になっている）ファイルをリントします。これにより、コードのスタイルや潜在的なエラーをチェックし、統一されたコード品質を保つことができます。✅
        • 使用した場合: コードの品質が向上し、チーム全体のコードスタイルが統一されます。リリース後のバグも減らせる可能性があります。
        • 使用しない場合: コーディングスタイルがバラバラになり、可読性が低下する可能性があります。また、潜在的なエラーが見過ごされ、後でデバッグに時間がかかることがあります。

    • types:

      • glob: "*.{js,ts, jsx, tsx}"：こちらも同様に、JavaScriptやTypeScriptのファイルが対象です。🔍
      • run: npx tsc：tsc（TypeScriptコンパイラ）を実行し、型チェックを行います。これにより、TypeScriptの型定義に問題がないかを確認し、実行時エラーを防ぎます。🛡️
        • 使用した場合: 型の不整合によるエラーをコミット前に発見でき、堅牢なアプリケーション開発に繋がります。
        • 使用しない場合: 型のエラーが実行時まで気づかれず、想定外の挙動やバグの原因となることがあります。

2. commit-msg（コミットメッセージフック） 💬

このセクションでは、コミットメッセージが作成された後に実行されるコマンドを定義します。これもparallel: trueなので、複数のコマンドがある場合は並行して実行されます。🚀

  • commands: 実行するコマンドのリストです。
    • commitlint:
      • run: npx commitlint --edit：commitlintを使って、コミットメッセージの形式をチェックします。これは、特定のルール（例：Conventional Commits）に従ってコミットメッセージが書かれているかを確認するために使われます。これにより、コミット履歴が読みやすくなり、自動生成ツール（changelogなど）との連携もスムーズになります。📝
        • 使用した場合: コミットメッセージの品質が統一され、プロジェクトの履歴管理がしやすくなります。後から変更履歴を追う際も非常に便利です。
        • 使用しない場合: コミットメッセージの形式がバラバラになり、履歴を追うのが困難になったり、自動化ツールの恩恵を受けられなくなったりします。

💡 サンプルコードと比較

Lefthookを使用しない場合（手動での実行）

# コミット前に手動でlintを実行
npx eslint .

# コミット前に手動で型チェックを実行
npx tsc

# コミット後、コミットメッセージを確認し、必要であれば修正
# commitlintはコミットメッセージを編集する際に使われるので、手動では少し扱いづらい
# 例: git commit -m "fix: something" してから、手動でcommitlintのルールに沿っているか確認

Lefthookを使用した場合（自動化）

# ファイルを変更し、ステージングする
git add .

# コミットを試みる
# これにより、上記lefthook.ymlに設定されたlint, types, commitlintが自動実行される
git commit -m "feat: add new feature"

このgit commitコマンドを実行するだけで、裏で以下の処理が自動的に走ります。

  1. npx eslint {staged_files} (linting) ➡️ コードスタイルチェック！
  2. npx tsc (type checking) ➡️ 型の整合性チェック！
  3. npx commitlint --edit (commit message linting) ➡️ コミットメッセージフォーマットチェック！

Discussion