【共同開発】GitHub Actions × PrettierでPush時にコードを整形する

「エディタによってコード整形が異なる」
「プルリクが来たけどコード整形のせいでどこが変更されたのか分かりにくい！」
「かといってコード整形機能を使わせないのも不便」

こうした悩みをもつチームリーダー向けのための記事です。

ということでこんにちは。株式会社PlaygroundのWebエンジニア稲垣です。

最近、業務委託のエンジニアに参画してもらい、弊社サービス「Playground」の機能改修・追加を行っています。

その中で起きた問題が「エディタ間のコード整形機能に差異があること」でした。

この記事では、以下について紹介をしていきます。

GitHub ActionsでPrettierを使うことになった理由

新しく参画したエンジニアの方は、Visual Studio Codeで「Prettier」という有名なコード整形プラグインを導入していました。

VSCodeのPrettierは、ファイルを保存するたびに自動でコードを整形してくれるプラグインですね。

しかし、僕はIntellij IDEAのエディタを使っていて、特にコード整形用のプラグインは入れていませんでした。

そのため、VSCodeのPrettierでコード整形すると、ファイルのほぼ全行に変更が加わってしまう状態になりました。

そのままプルリクが来たときはガチで辛かった…

「結局どこに変更が加わってるの？」という状況になったからです。

これ以外にも、マシンやエディタの違いによって、チーム内でコードが書き換えられてしまうことがあると思います。

「VSCodeでPrettierを使うな！」という運用にするのは簡単ですが、技術的に対応できることがないか模索した結果、「GitHub ActionsでPush時にコード整形をする」にたどり着きました。

GitHub ActionsでPrettierを使ってコード整形する方法

方法はコチラの記事を参考にしました。

導入手順をざっくりまとめます。

Prettierをインストールする

現在の開発言語はJavaScript(TypeScript)がメインです。Reactを使って開発しています。

HTML/CSS/JSなどのコード整形ツールとしてはPrettierが有名なので、導入してみました。

ReactのJSXやTypeScriptにも対応しているので安心です。

まずはnpmでインストールしましょう。

npm install --save-dev prettier

GitHub Actionsの設定ファイルを作成

GitHub ActionsはCIツールです。

GitHubにコードをコミット、プッシュ、プルリクした時などトリガーを設定して、トリガーが起動するとタスクが実行されます。

以下のパスに作成したファイルがGitHub Actionsの設定ファイルとなります。

.github/workflow/******.yml

今回は”auto-prettier.yml”というファイル名で作成しました。

developブランチにPushされたコードを整形するアクション

以下のように記述します。

.github/workflow/auto-prettier.yml

name: Prettier

on:
  push:
    branches:
      - develop

env:
  FILE_PATTERN: "src/**/*.{ts,tsx,js,jsx}"

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: Run Prettier
        run: |
          npx prettier --write ${FILE_PATTERN}
      - uses: stefanzweifel/git-auto-commit-action@v3.0.0
        with:
          commit_message: Apply Prettier Change

ポイントを絞って解説します。

トリガーの設定

on:というハッシュ内に記述した内容がトリガーになります。

今回は「developブランチにpushした時」だったので、上記のような記述となっています。

それ以外にも様々なトリガーを設定できるので、ドキュメントを参照してください。

変数の設定

env:というハッシュには変数を設定することができます。

今回は「どのファイルをPrettierで整形するのか」を指定するファイルパターンを変数化しています。

env:
  FILE_PATTERN: "src/**/*.{ts,tsx,js,jsx}"

この変数を、実行コマンド内で使っているということですね。

GitHub ActionsでPrettierを使ってみた感想

まだ運用して日が浅いのですが、1度使い始めてしまえばエディタ間のコード差異を吸収してくれているので、PRのレビューが楽になりました。

これから実際に運用してみてどうなるのか、様子を見たいと思います。