GitHub Actionsでpushした際に自動的にLinterを実行する方法

GitHub Actionsとは

GitHubが提供するCI/CDサービス。

CI/CDは「継続的インテグレーション/継続的デリバリー」とは簡単に言うと開発での色々な処理の自動化を意味する。

例えばJavaScriptファイルをGitでGitHubでプッシュした際に自動的にGitHub上でLinterを実行させてコードをチェックさせることなどができる。

GitHub Actionsの使用方法

GitHub ActionsはGitがパソコンにインストールされていてGitHubのアカウントを持っていれば使用できる。

手始めにGitでGitHubにプッシュしたらGitHub ActionsでHello Worldを表示する方法について説明する。

まずGitHubでリポジトリを作成してgit cloneする。
(以降はhello-worldでリポジトリを作成してgit cloneした場合の例)

git clone https://github.com/iwbjp/hello-world.git

次にGitHub Actionsの実行に必要なフォルダとファイルを作成する。

cd hello-world
mkdir -p .github/workflows/
touch .github/workflows/hello.yml

hello.ymlには以下を記述する。

name: Hello world!
 on: puth
 jobs:
   Hello-world:
     runs-on: ubuntu-latest
     steps:
       - run: echo "Hello world! 🎉"

あとはコミットしてプッシュすればGitHubのActionsにHello world! 🎉が表示される。

コミットしてプッシュすればGitHubのActionsにHello world! 🎉が表示される

ESLintをGitHub Actionsで実行

LinterをGitHub Actionsでプッシュ時に実行するサンプルを作成するためにまずlint-sampleというリポジトリを作成して前述のhello-worldのときのようにgit cloneする。

次にGitHub Actionsの実行に必要なフォルダとファイルを作成する。

cd lint-sample
mkdir -p .github/workflows/
touch .github/workflows/lint.yml
npm init -y; npm i -D eslint @cybozu/eslint-config

これだけだとESLintが使えないので.eslintrc.ymlを作成して設定を以下の内容で保存する。

env:
  browser: true
  es2021: true
extends: '@cybozu'
parserOptions:
  ecmaVersion: 12
  sourceType: module
rules:
  eqeqeq: error

今回はeqeqeq( != )がエラーになるようにrulesを追記。(@cybozuではwarnのため)

GitHub Actionsの処理では警告(warn)はsuccessとして通るので注意。

次にnpm run lintが実行できるようpackage.jsonに追記。

"scripts": {
   "lint": "eslint js/**/*.js"
},

JavaScriptファイルはjsフォルダを作成してfoo.jsを入れた。

foo.jsの中身はESLintのeqeqeqでエラーが出るよう !== ではなく != にしてあります。

const a = 1;
const b = 2;
if (a != b) {
  console.log('a & b is not equal!');
} else {
  console.log('a & b is equal.');
}

この時点でESLintを実行してエラーが出るか確認する。

npm run lint

エラーが表示されたらESLintが機能しているので、次にlint.ymlファイルに以下を記述する。

name: Lint
on: push
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Set Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: ci
        run: npm ci
      - name: ESLint
        run: npm run lint

以上の手順がすべて完了したらadd, commit, pushを行う。

git add --all
git commit -m "first commit"
git push

プッシュ後にGitHubのリポジトリのActionsを確認すると、ESLintが実行されてエラーになっていることが確認できる。

GitHub Actionsでpushした際に自動的にLinterを実行する方法

GitHub Actions ESLint 実行結果

foo.js内の != を !== に修正して再度プッシュすればエラーにはならないので試して見ると良いです。

htmlhintやStylelintなどのほかのLinterも似たような手順で追加可能。

今回は自身で1から作成したが、ESLintの処理であればRun eslint with reviewdogを使用したほうが見栄えが良くなるし簡単に作成できる。

name: reviewdog
on: push
jobs:
  eslint:
    name: eslint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: yarn install
      - uses: reviewdog/action-eslint@v1
        with:
          reporter: github-check
          eslint_flags: 'js/'