2024/2/20

GitHub Actionsのeslintでbunを使う

Next.jsのプロジェクトでeslintを自動で実行するために、GitHub Actionsでeslintをbunで動かす。

GitHub Actionsとは

公式サイト より引用

GitHub Actionsを使用すると、ワールドクラスのCI / CDですべてのソフトウェアワークフローを簡単に自動化できます。 GitHubから直接コードをビルド、テスト、デプロイでき、コードレビュー、ブランチ管理、問題のトリアージを希望どおりに機能させます。

ようは、自動でテストなりデプロイなりを自動で行えるツールってことです。

より詳しい情報はドキュメントに書いてあります。

どうやる

リポジトリに.github/workflowsというディレクトリを作成して、その中にymlを配置する形です。

GitHubのリポジトリのActionsタブからも設定できます。

今回はそのeslintのテンプレートとbunのドキュメントを参考にしました。

実際のyamlファイルは以下の通りです。

name: ESLint
 
on:
  push:
    branches: ['main']
  pull_request:
    branches: ['main']
 
jobs:
  eslint:
    name: Run eslint scanning
    runs-on: ubuntu-latest
    permissions:
      contents: read
      security-events: write
      actions: read
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
 
      - name: Setup Bun
        uses: oven-sh/setup-bun@v1
        with:
          bun-version: latest
 
      - name: Install Packages
        run: bun install
 
      - name: Run ESLint
        run: bun run lint

これは、mainブランチのpushとmainブランチに対してのプルリクで実行されます。

jobsの中でインストールするのはeslintだけでもいいのですが、pluginを入れているかつ、 Next.jsを使っていてnext lintを使いたいということで、どうせなら全部インストールしちゃいました。

最後に

実際の導入していたプロジェクトはこのようになっています。

https://github.com/RUNFUNRUN/VALORANT-Oekaki-Chat/blob/15e2293209aafce8c8629d1529f6577e0b134030/.github/workflows/bun-eslint.yml

このようにすることで、プルリクが来ても自分でチェックする箇所が減っていいですね。