GitフックをHusky + lint-stagedからLefthookへ移行したので使い方をご紹介

自己紹介

こんにちは！
TypeScriptが大好きなフリーランスの塩野です。
企業や官公庁／自治体のエネルギー調達・脱炭素化を支援するサービスを展開するエナーバンクという会社で業務委託に携わらせていただいています。
GitHubではsaltyshiomixというIDで生息しています。

Gitフックとは

Gitフックとは、特定のアクションが発生した時にカスタムスクリプトを叩く方法を指します。
代表的な例としてはgit commitの直前（pre-commit）にLintやFormat、場合によってはユニットテストを動かしたりするようなものです。

本記事では、LintおよびFormatをpre-commit時に行う方法をそれぞれ紹介します。
代表例として、LinterにはESLint、FormatterにはPrettierを使用します。

ESLintとPrettierの詳細設定は割愛させていただきますが、サンプル設定は以下になります。

ESLint

ESLint v8の場合

.eslintrc.json

{
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint"],
  "rules": {
    "no-console": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "error"
  }
}

npm install --save-dev eslint@^8 eslint-config-prettier prettier typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

ESLint v9以降の場合（flat config）

eslint.config.ts

import globals from 'globals'
import eslint from '@eslint/js'
import tseslint from 'typescript-eslint'
import prettierConfig from 'eslint-config-prettier'

export default tseslint.config(
  { files: ['**/*.ts'] },
  {
    languageOptions: {
      globals: {
        ...globals.node,
      },
    },
  },
  eslint.configs.recommended,
  tseslint.configs.recommended,
  prettierConfig
)

npm install --save-dev eslint @eslint/js eslint-config-prettier globals jiti prettier typescript typescript-eslint

Prettier

.prettierrc.json

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "useTabs": false,
  "tabWidth": 2
}

Husky + lint-stagedの使い方

• Husky - Git hooks made easy 🐶 woof!
• lint-staged - 🚫💩 — Run tasks like formatters and linters against staged git files

必要なライブラリのインストール

npm install --save-dev husky lint-staged

Huskyを有効にするためには以下コマンドを実行します。

npx husky init

これで.husky/というフォルダが作成されます。

必要な設定ファイル

.husky/pre-commit

#!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

この設定でpre-commit時にlint-stagedコマンドが実行され、以下設定に書かれた内容が走ります。

lint-staged.config.mjs

export default {
  '**/*.(ts|tsx|js)': (filenames) => [
    `npx eslint --fix ${filenames.join(' ')}`,
    `npx prettier --write ${filenames.join(' ')}`,
  ],
}

Lefthookの使い方

Fast and powerful Git hooks manager for any type of projects.

Go製のため高速なGitフックライブラリです。

必要なライブラリのインストール

npm install --save-dev lefthook

Lefthookを有効にするには、lefthook.ymlを設定してからnpx lefthook installコマンドを実行します。

lefthook.yml

pre-commit:
  commands:
    lint:
      glob: '*.ts'
      run: npx eslint {staged_files} --fix
      stage_fixed: true
    format:
      glob: '*.ts'
      run: npx prettier --write {staged_files}
      stage_fixed: true

YAML形式ですが、Gitフック単位で様々なスクリプトを直感的に記述できることがわかります。

まとめ

これまではHusky + lint-stagedが一強でしたが、Lefthookの登場により、直感的で柔軟性のある書き方ができるようになりました。
どちらも同じ内容を実現できますが、1つでも手順や設定ファイルが少ないほうが好きな方にはLefthookがおすすめです。

最後に

株式会社エナーバンクでは、Full-Stack TypeScriptやサーバーレスアーキテクチャーを活用することで最小限の開発リソースで複数のプロダクトを同時開発しています。

エネルギー調達・脱炭素化を実現する複数のソリューションを展開し、需要家やマーケットの状況に応じて最適な調達ポートフォリオとなるサービスを実装しています。
今後も様々な機能開発や改善を通じて、サービスの価値や魅力を高めていきます。

もし事業や技術スタックに興味があるエンジニアの方がいましたら、下記よりぜひ採用ページおよび、エンジニアの求人ページをご覧ください！

良き開発ライフを！