読者です 読者をやめる 読者になる 読者になる

y_nakahira’s blog

エンジニアの技術ブログ。

CircleCIからESLintの指摘結果をPull Requestにコメントする

先日、CI/CD NIGHTにて「CircleCIで結果をSlackに通知してみる」という内容でLTをさせていただきました。

発表資料はこちら。

www.slideshare.net

元々CircleCIからSlack通知するまでの連携で終わる予定でしたが、後半のスライドにあるようにCircleCIから直接ESLintの指摘結果をPull Requestにコメントできるsaddlerなるものを見つけたので、せっかくなので試してみました。今回はその内容を紹介します。

What's saddler

saddlerとはRubyのパッケージでLint結果をPull Requestにコメントしてくれるものです。今回はこれを利用し、ESLintのチェック結果をPull Requestにコメントするものを作成しました。

利用手順

今回はGitHubとCircleCIの連携を利用しており、ESLintを実行する必要があるため

を前提としています。設定方法は、先の資料の前半部分に記載しています。

どんな感じに見えるの?

下記のようにlint結果がコメントされます。
f:id:y_nakahira:20170211034559p:plain

run-eslint.shの作成

こちらを参考にしました。
Androidのコードを自動で解析し、GitHubのpull requestにコメントする - Qiita

#!/bin/bash
set -v
if [ "${CIRCLE_BRANCH}" != "master" ]; then
 # Circle-CI
 #
 echo gem install
 gem install --no-document checkstyle_filter-git saddler saddler-reporter-github

 echo "********************"
 echo "* select reporter *"
 echo "********************"

 if [ -z "${CI_PULL_REQUEST}" ]; then
 # when not pull request
 REPORTER=Saddler::Reporter::Github::CommitReviewComment
 else
 REPORTER=Saddler::Reporter::Github::PullRequestReviewComment
 fi

 echo saddler
 git diff --name-only origin/master \
 | grep '.*\.js$' \
 | xargs node_modules/eslint/bin/eslint.js -f checkstyle \
 | checkstyle_filter-git diff origin/master \
 | saddler report --require saddler/reporter/github --reporter $REPORTER

fi
echo saddler

下記の流れになっています。

  • masterとのdiff取得
  • jsファイルをgrep
  • eslintの結果をcheckstyle形式にフォーマット
  • saddlerからPull Requestにコメント

circle.ymlの設定

先ほどのshを実行するために、circle.ymlに下記を追加します。
※shを実行するために実行権限を付与しています。

test:
  override:
    - chmod a+x run-eslint.sh
    - ./run-eslint.sh

GitHubのトークンをCircleCIに設定

GitHub
  • [Settings] > [Developer settings] > [Personal Access Tokens]でアクセストークンを作成
CircleCI
  • 対象プロジェクトの設定画面から[Environment Variables]を選択
  • 下記の値で設定します
    • Name: GITHUB_ACCESS_TOKEN
    • Value: 上で作成したアクセストークン

さいごに

「CirclecI ESLint pr」で調べてもなかなかマッチする記事がでなかったので、何かの参考になればいいなと思います。GitHubソースコードを公開しています。
https://github.com/yNakahira/circleci