どうも僕です。
本日は、今やっている案件で『GitHub ActionsでPrettierを実行したい』と話が出て、それを導入した話です。
今回はNuxt3の中に導入したので、その一例を。
ちょっとスクショで申し訳ないんですがw
まず『.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
この辺りのことは公式に書いてありますので、一度目を通してみると良いかと思います。

コメント