Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

GitHub にコード整形してもらおう - GitHub Actions でコード整形&コミット

コード整形していますか?

複数人数でコードを書いていたりするとエディターの設定によってインデントの幅が違ったり、改行の位置が違ったりして困ってしまうことってありませんか?

GitHub Actions を利用すると、コードをプッシュしたときに自動的にコードを整形するワークフローが構築できます。

Git Commit -> Push -> GitHub Actions でコード整形 -> 整形コミットを GitHub にコミット&プッシュ

本記事は GitHub Actions を用いた自動コード整形環境の構築方法を紹介します。

今回の紹介ツール

  • Prettier ( JavaScript 整形ツール )
  • GitHub Actions
  • stefanzweifel/git-auto-commit-action

Prettier

Prettier とは JavaScript や HTML, CSS を自動整形してくれるツールです。

自分は JavaScript ( TypeScript ) をよく記述しているので、今回は Prettier を利用してコード整形する方法を紹介します。

Prettier のインストール

npm install -D prettier
// or
yarn add -D prettier 

prettierの設定ファイル .prettierrc.js の作成(オプション)

'use strict';

module.exports = {
  bracketSpacing: false,
  singleQuote: true,
  jsxBracketSameLine: true,
  trailingComma: 'es5',
  printWidth: 80
};

以下のコマンドで、Pretteir でコード整形できます。

npx prettier --write "src/**/*.{ts,tsx,js,jsx}"
//or
yarn prettier --write "src/**/*.{ts,tsx,js,jsx}"

GitHub Actions

GitHub Actionsとは GitHub が提供している CI ツールです。CircleCI や Travis CI などのように Git の Push やプルリクのアクションに応じて、あらかじめ設定しておいたタスクを実行してくれるものです。

GitHub でコード管理 && CI 実行が完結するので管理が楽になります。

.github/workflow/******.yml に保存されたコードを GitHub Actions は実行してくれます。

GitHub Actions でコード変更を行ったときにコミットする

GitHub Actions でコードの内容を変更したとき、変更内容をコミットするために以下の Action を利用します。

stefanzweifel/git-auto-commit-action

使いかたはこんな感じです。

   steps:
     - uses: stefanzweifel/git-auto-commit-action@v3.0.0
        with:
          commit_message: Apply Prettier Change

GitHub Actions 内で Pretteir でコード整形をしたあとに、この Action を実行すれば、整形済みコードをコミットできるというわけです。

自動的にコードを整形

サンプルコードを二つ載せます

  • master ブランチが更新されたら、自動的に pretteir でコードを整形
  • Pull Request をもらったときに PR ブランチを整形

master ブランチが更新されたら、自動的に pretteir でコードを整形

Master ブランチがコミットされると自動で整形コミットを行います。
プルリクエストが取り込まれたあとに、コード整形が行われるので GitHub Flow や Git Flow などといった直接 master に push しない運用だと、push 時にコンフリクトしにくいです。

.github/workflows/prettier.yml

name: Pretter

on:
  push:
    branches:
      - master

env:
  FILE_PATTERN: "{src,__tests__}/**/*.{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: |
          yarn install
          yarn prettier --write ${FILE_PATTERN}
      - uses: stefanzweifel/git-auto-commit-action@v3.0.0
        with:
          commit_message: Apply Prettier Change

Pull Request をもらったときに PR ブランチを整形

プルリクエストブランチに対して、整形を行います。プルリクエストがきたときに整形を行うので master ブランチには整形済みのコードしかマージされません。

ただ注意点は、プルリクエストをだした後に整形コミットを GitHub 側で追加するので、プルリクエストに追加コミットをプッシュするとき、git push -f をするか、もしくは、git pull してから git push する必要があります。

.github/workflows/prettier.yml

name: Pretter

on:
  pull_request:

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

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

まとめ

コード整形とコード修正がまざってしまうと、肝心のコード変更点がどこなのかわかりにくくなってしまいがちです。
GitHub Actions を利用してコード整形を自動化してしまうことで、コード整形忘れをなくしましょう。

Ouvill
プログラムとか小説とか書いている人。Web 開発に関するお仕事募集中です。というか誰か雇ってくださいませんか?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away