[Code Quality] Lefthook

概要

フロントエンドの開発する時、Huskyとlint-stagedを使ってGitのcommitを実行する時、自動でESLintやPrettierを実行するように設定して使っていました。

[React] Husky, lint-staged

最近はGolangを使ってウェブサーバを開発したり、Flutterを使ってアプリを開発してますが、NodeベースではないプロジェクトでHuskyとlint-stagedのようにLinterやテストコードを実行する方法が必要にあんりました。

今回のブログポストではLefthookを使ってGitのcommitを実行する時、Linterやテストコードを実行する方法を共有します。

Lefthook: https://github.com/evilmartians/lefthook

Lefthookのインストール

Lefthookは色んな言語やOSをサポートしています。自分の開発環境に合わせてLefthookをインストールしてください。

私はmacOSを使っているので、次のコマンドを実行してLefthookをインストールしました。

brew install lefthook

Lefthookの設定

このように設定したLefthookを使うためには、開発しているプロジェクトのフォルダに./lefthook.ymlファイルを作って次のように修正する必要があります。

pre-commit:
  parallel: true
  commands:
    pretty:
      glob: './src/**'
      run: npx prettier --check {staged_files}
    linter:
      glob: 'src/**/*.{ts,tsx}'
      run: npx eslint {staged_files}

pre-commitまたはpre-pushを使ってGitのcommitやpush以前に特定動作をするように設定することができます。parallelオプションを使うと実行するコマンドを並列で実行できるように設定することができます。commadsには特定アクションの名前(pretty, linterなど)に実行するコマンド(run)を設定することができます。

globを使うとファイルリストをフィルタリングすることができますし、rootオプションを使うとコマンドを実行するフォルダを指定することができます。

Execute in sub-directory

pre-commit:
  commands:
    backend-linter:
      root: "api/" # Careful to have only trailing slash
      glob: "*.rb" # glob filter
      run: bundle exec rubocop {all_files}

これ以外にも次のような機能を使えます。

Lefhookの実行

このように設定したLefthookが上手く実行できるか確認するため次のコマンドを実行してみます。

lefthook run pre-commit

そしたら、./lefthook.ymlに設定したコマンドが実行されることが確認できます。

Lefthookの適用

lefthook run ...コマンドは./lefthook.ymlファイルの内容を1回だけ実行します。しかし、私たちはGitのcommitが実行されるたびに./lefthook.ymlファイルに設定したコマンドを実行するように作りたいです。今度は次のコマンドを実行してGitのcommitが実行される時、./lefthook.ymlに設定したコマンドが実行されるように設定します。

lefthook install

今後、Gitのcommitコマンドを実行すると、./lefthook.ymlに設定したコマンドが実行されることが確認できます。

特定フォルダ下のファイルが変更された時だけ実行する

Lefthookを使う時、特定したフォルダ下のファイルが変更された時でk、特定コマンドを実行したい場合があります。例えば、フロントエンドとバックエンドを同時に管理するプロジェクトではフロントエンドコードだけ修正した場合、バックエンドに関するコマンドは実行したくない場合があります。

この時、次のようにfilesオプションを使うと特定したフォルダ中のファイルが変更された時だけ特定コマンドを実行するように設定することができます。

pre-commit:
  parallel: true
  commands:
    linter:
      files: git diff --name-only HEAD | grep "frontend/" || echo ''
      root: "frontend/"
      run: npm run lint
    test:
      files: git diff --name-only HEAD | grep "backend/" || echo ''
      root: "backend/"
      run: go test ./backend/test/...