GitHub ActionでJavaScriptのフォーマット漏れをチェックする

設定

1. prettierの設定

prettierの導入をします。様々なサイトで案内されているのでそちらを参照して下さい。
例）https://ics.media/entry/17030/
以下のようにpackage.jsonに記述がされると思います。

package.json

{
  "scripts": {
    "format": "prettier --write src"
  },
  "devDependencies": {
    "prettier": "^2.7.1"
  }
}

2. GitHub Actionの設定

Node.jsのversionが14の例です。
PullRequestが生成されたら、こちらのActionが実行されます。

.github/workflows/pre-merge.yml

name: Pre Merge

on:
  pull_request:
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  test:
    runs-on: ubuntu-20.04
    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          fetch-depth: 0

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install npm
        run: npm ci

      - name: Format code
        run: npm run format

      # format後にgit addして差分があるかgit diffでチェック
      - name: Check diff exists 
        run: |
          git add -N .
          git diff
          line=`git diff | wc -l`
          if [ $line -gt 0 ]; then
            echo "You need to format before commit"
            git diff
            exit -1
          fi

テスト

セミコロン忘れのPRを作成します。そうすると自動的にGitHub Actionが実行され、フォーマット漏れを検知しています。

その結果、PRはCheck Failedとなります。

最後に

タイトルではJavaScriptと書いていますが、prettierが対応している言語でしたら、もちろんチェック可能です。

以上