『GitHub』にプッシュしたら『GitHub Actions』と『Prettier』でコードが成型できる様にした話

どうも僕です。

本日は、今やっている案件で『GitHub ActionsでPrettierを実行したい』と話が出て、それを導入した話です。

今回はNuxt3の中に導入したので、その一例を。

ちょっとスクショで申し訳ないんですがｗ

まず『.gitignore』のあるディレクトリに来たらprettierをインストールします。

npm install --save-dev prettier

続きまして、GitHub Actionsの設定ファイルを作成します。

.github/workflows

↑この通りディレクトリを作りまして、中に.ymlのファイルを作ります。

（ファイル名は何でもよいので、今回は『auto-prettier.yml』としました。）

ちなみに、workflowsをworkflowと記載しているサイトもあるので、これはタイポなので引っ掛からない様にご注意ください。

↓肝心のauto-prettier.ymlの中身はこんな感じです。

name: Prettier
on: push
env:
  FILE_PATTERN: "src/**/*.{ts,tsx,js,jsx,vue}"
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 18.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

今回はNuxtに導入しているので、.vueのファイルも対象にしました。

（ちなみに、これは試作のテストプロジェクトなので、ブランチ関係なくpushすると毎回毎回CIが走る様になってますが、周囲と調整してmainのブランチでマージした時にだけ走る様に後で改造するかと思います。）

それで、肝心の動いた画面はこんな感じに。

GitHubのActionsをクリックすると、緑のレ点が出てきます。

それで、もしコードの成型で引っ掛かった場合は自動的に成型されて、ローカルリポジトリの方にはプルする様に出てきますね。

（私の場合はSoucetreeを使っているので、Soucetreeのプルボタンが光ります。）

あと、.prettierrc.json に成型ルールを記載することもできます。

今は↓の様にしてありますが、まあサンプルという事で。

{
  "printWidth": 100,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf"
}

『.prettierignore』には下記の様に記載してあります。

# Ignore artifacts:
build
coverage

この辺りのことは公式に書いてありますので、一度目を通してみると良いかと思います。

Prettier · Opinionated Code Formatter

Opinionated Code Formatter