働き方

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

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

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

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

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

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

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

この記事で解説すること
  • なぜGitHub ActionsでPrettierを使うことになったのか
  • GitHub ActionsでPrettierを使う方法
  • GitHub ActionsでPrettierを使ってみてどうなったか

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

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

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

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

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

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

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

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

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

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

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

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

GitHub Actionsの導入手順
  1. Prettierのインストール
  2. GitHub Actionsの設定ファイルを作成
  3. developブランチにPushされた時にコード整形するアクションを作成

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のレビューが楽になりました。

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

株式会社Playgroundのサービス
  • 無料・簡単・片手でホームページを作成できる自社サービス Rakwi
  • Web制作とアプリ開発を学べるオンラインプログラミング講座 Upstairs
  • 開発,DX推進支援サービス スタートアッププラン

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA