Run eslint with reviewdog

ESLintを実行して、プルリクエストにエラーや、警告を投稿するActionです。投稿される項目は、プルリクエストに含まれるコミット部分のみになります。

なので、プルリクエストに差分が含まれていない部分のエラーについては投稿されません。

投稿の例：

reviewdogというのは、GitHubのプルリクエストに上記のような投稿を簡単にできるようにするツールです。ESLint以外にも色々なLinterに対応しているので、MarketplaceでLinter名 + reviewdogと検索すると見つかるかもしれません。

ディレクトリー構成

└─.github
    └─workflows
        └─eslint.yml

eslint.ymlの内容

eslint.ymlの全体は以下の様になります。

name: ESLint
on:
  pull_request:
    types:
    - opened
    - synchronize

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

jobs:
  reviewdog:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
    - uses: actions/checkout@v3
    - uses: reviewdog/action-eslint@v1
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        reporter: github-pr-review
        eslint_flags: 'src/'

on, concurrencyについては1回目の記事で解説しているので、省略します。

actions/checkout

- uses: actions/checkout@v3

actions/checkoutはActionのstepsで、現在のブランチの内容をチェックアウトして、steps内でファイルを使える様にするものです。

ブランチのファイルに対して、ESLintを実行するのに使っています。

reviewdog/action-eslint

- uses: reviewdog/action-eslint@v1
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        reporter: github-pr-review
        eslint_flags: 'src/'

この部分がRun eslint with reviewdogになります。

eslint_flagsでESLintに渡すオプションを設定できます。

今回はsrcディレクトリーの中にjsファイルが入っているので、パスを指定しています。

最後に

ESLintを自動で実行して、プルリクエストにわかりやすく表示するActionを紹介しました。reviewdogはプルリクエストにレビュー形式で投稿されるので、レビューがやりやすくなりました。

ESLintだけでなく、カスタマイズもできて何でも投稿できるので自作のツールと組み合わせるのも良いと思います。