GitHub Actionsにreviewdogを飼ってみた!(eslint編)

はじめに

最近GitHub Actionsの記事をよく見かけるので、試してみることにしました。

本稿は、GitHub Actionsにreviewdogを連携させた記事となります。

reviewdogとは

各種linterの実行結果をプルリクエストのコメントで指摘してくれます。 詳細な説明は作者様の記事を参照するのが良いです。

Reviewdog を飼ってコードレビューや開発を改善しませんか

reviewdogは、GitHub Actionsに対応しており、GitHub Actionsのusesで指定できるコードが用意されております。 詳細は、Pubilc Reviewdog GitHub Actionsを参照してください。今回はreviewdog/action-eslintを活用します。

用意するサンプル

用意したリポジトリは以下のようなプロジェクトです

  • reactプロジェクト
  • git commitのタイミングでeslintでチェック。エラーだったらコミットしない

つまりチェク結果が「エラー」になるコミットは、commitできないのでpushされない。一方で「警告」になるコミットはpushされる設定です。

本稿では、eslintのチェク結果が「警告」になるコミットが含まれたプルリクエストに、reviewdogが対象箇所をコメントで通知してくれることを試します。

試してみる

GitHub Actionsの設定ファイル作成

こちらはシンプルに、masterにpushされたらlintする設定を書いてます。(おまけです)

  • .github/workflows/main.yml
on:
  push:
    branches:
      - master

name: test frontend sample app
jobs:
  lint:
    name: Lint check
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: yarn install
      - run: yarn lint

reviewdogのGitHub Actions設定作成

警告をプルリクエストのコメントに出力する設定を書きます。

reviewdog/action-eslintをコピペして、eslint_flagsにプロジェクトに適したeslintのフラグと引数を指定します。github_tokenの部分は自動的に生成されます。

  • .github/workflows/reviewdog.yml
name: reviewdog
on: [pull_request]
jobs:
  eslint:
    name: runner / eslint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: eslint
        uses: reviewdog/action-eslint@v1
        with:
          github_token: ${{ secrets.github_token }}
          reporter: github-pr-review # Change reporter.
          eslint_flags: 'src/**/*.{ts,tsx}'

プルリクエストにコメントが出力されるのを確認

警告がでるプルリクエストを作る

ブランチを切り替えます

$ git checkout -b develop

一応プロジェクトの動作を確認

$ yarn install
$ yarn lint
$ yarn start

src/index.tsxno-console出るようにソースを書き換える

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

console.log('foo'); // <- 追加
ReactDOM.render(<App />, document.getElementById('root'));

警告が出力されることを確認

$ yarn lint
yarn run v1.17.3
$ eslint 'src/**/*.{ts,tsx}'

/Users/takahashi.shunichi/go/src/github.com/shuntaka9576/github-actions-front-sample/src/index.tsx
  6:1  warning  Unexpected console statement  no-console # <-- no consoleが出ていることを確認

✖ 1 problem (0 errors, 1 warning)

✨  Done in 2.53s.

コミットを作る (Warningが出ていますが、関係ないので無視します..すいません..)

$ git add src/index.tsx
$ git commit -m "Change file"

Warning: Setting pre-commit script in package.json > scripts will be deprecated
Please move it to husky.hooks in package.json, a .huskyrc file, or a husky.config.js file
Or run ./node_modules/.bin/husky-upgrade for automatic update

See https://github.com/typicode/husky for usage

husky > pre-commit (node v12.6.0)
  ↓ Stashing changes... [skipped]
      → No partially staged files found...
        ✔ Running linters...
        [develop d5618fe] Change file
         1 file changed, 1 insertion(+)

プルリクエストを作ります(hubコマンドを使っていますが、GitHubのWeb画面からやっても問題ありません)

$ git push
$ hub pull-request
https://github.com/shuntaka9576/github-actions-front-sample/pull/1

結果確認

プルリクエスト画面を確認(コメント部分)

出力されました!犬アイコンかわいいですね!

その他の参考画像

プルリクエスト画面を確認(全体)

GitHub Actionsの画面

最後に

GitHub Actionsとreviewdogの連携を試しました。他のCI/CDツールに慣れている人はサクッと構築できるのではないでしょうか。reviewdogも非常に簡単に組み込めたので、今後活用していきたいと思います。