GitHub で autofix.ci をつかってコードを自動で修正する

autofix.ci というツールを使って、GitHub でプルリクエストを作成したときに ESLint や Prettier での修正などを自動で適用するようにしたので、備忘録的な感じで書いておこうと思います。

普段、GitHub にある他のひとのリポジトリや OSS のリポジトリでどのようなツールが使われているのかを見るのがすきでよく見ているのですが、Nuxt のリポジトリのワークフローを見ているときに使っているのを見つけて「良さそうだなあ」ということで使ってみました。

何ができるのか

ESLint などの Linter を導入している場合、GitHub にプッシュされたコミットに対して GitHub Actions や CircleCI などを利用して Linter の実行を行うワークフローを設定することが多いと思います。

また、そうしたワークフローを設定する場合、GitHub のブランチ保護の機能を利用して、ワークフローが失敗した場合にプルリクエストをマージ出来ないようにする設定も合わせて行うと思います。

ブランチ保護ルールを管理する - GitHub Docs

こうした設定は、 ソースコードの品質維持のためには重要 なものですし、 エラーを未然に防ぐためにも必要 なものだと思います。

しかし、改行の位置やコードスタイルなどの小さな問題のために、プルリクエストをチェックアウトして、コードを修正、もしくは eslint . --fix などのコマンドを実行して、コミットしてプッシュして…とするのは大変です。

autofix.ci は、 そういった修正を代わりにコミットしてくれる GitHub App です。

使ってみる

今回は ESLint と Prettier の修正を自動で行うワークフローを設定します。

環境については以下のとおりです。パッケージマネージャーには pnpm を使用しています。

autofix-ci/action - 8caa572fd27b0019a65e4c695447089c8d3138b9 （コミットハッシュ値）
ESLint - 8.45.0
Prettier - 3.0.0

実行するリポジトリの用意、ESLint や Prettier の設定についての説明は省略します。以下のように pnpm lint で ESLint の修正、pnpm format で Prettier の修正が実行されるように設定しているリポジトリに、ワークフローを設定します。

{
  "scripts": {
    "lint": "eslint . --ext .js,.ts --fix",
    "format": "prettier . -w"
  },
  ...
}

まず、autofix.ci のウェブサイトにある 「Install on GitHub」 から対象のリポジトリへ GitHub App をインストールします。

インストール後、GitHub Actions のワークフローを追加します。ワークフローのファイル名は自由につけて大丈夫ですが、ワークフローの名前は autofix.ci とする必要があります。

以下は autofix.ci のドキュメントを参考に用意した、main ブランチへのプルリクエストが作成されたら自動で ESLint と Prettier のコマンドを実行してコミットするワークフローです。

name: autofix.ci # 必ず「autofix.ci」とする必要がある

on:
  pull_request:
    branches:
      - main

permissions:
  contents: read

jobs:
  # Autofix
  autofix:
    name: Autofix
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        id: pnpm-install
        with:
          run_install: false
      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
      - name: Setup pnpm cache
        uses: actions/cache@v3
        with:
          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-
      - name: Install dependencies
        run: pnpm install

      # ESLint の修正を実行
      - name: Run ESLint
        run: pnpm lint
      # Prettier の修正を実行
      - name: Run Prettier
        run: pnpm format
      # autofix.ci の Action を実行
      - name: Autofix
        uses: autofix-ci/action@8caa572fd27b0019a65e4c695447089c8d3138b9

ワークフローを設定後、main ブランチに対して ESLint や Prettier でエラーが出る変更（修正のコマンドで修正可能なもの）をコミットしプルリクエストを作成すると、autofix.ci のボットがコミットしてくれるのが確認できます。

autofix.ci を使わなくても、ワークフローでコードを修正してコミットするように設定することは可能だとは思いますが、フォークされたリポジトリからのプルリクエストの場合の設定だったり、セキュリティを考慮した permissions などの設定を考えたりが必要なことを思うと、こういった GitHub App で簡単に対応できるのは助かります。

また、ドキュメントにも記載がありますが、Linter の実行だけでなく画像ファイルの縮小などを実行してコミットするといったことも可能なので、他にも便利な使い方ができそうです。