Rowicy

CIで静的解析を実行する

#Tech

本記事では、GitHub Actionsを利用したCIで、各種ツールでの静的解析の実行方法をご紹介します。
静的解析ツールは様々ありますが、今回はその中でも筆者がよく使う「Prettier」「Biome」「Stylelint」の3つを取り上げます。

前提

パッケージマネージャーには pnpm を採用しています。
また、プロジェクトルート直下に使用する Node.js のバージョンを記述した .node-version を設置し、CI で使う Node.js のバージョンとして参照するようにしています。

Terminal window
.
├── .github
│   └── workflows
├── .node-version
└── src

今回ご紹介するサンプルはこれらの前提に則ったものになっているので、必要に応じて読み替えてください。

CI YML ベース構文

基本的には /.github/workflows/ 配下に test.yml のようなファイルを作成し、以下のような記述をしています。
また、 {実行内容が分かる見出しを記述} {実行するコマンドを記述} を任意のものに書き換えたり、複数実行したい場合は書き足したりしています。

name: "Test"


on:
  pull_request:
    branches:
      - develop
      - main


jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4.1.1
      - uses: pnpm/action-setup@v4
        with:
          version: 9.1.0
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: ".node-version"
          cache: "pnpm"
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: {実行内容が分かる見出しを記述}
        run: {実行するコマンドを記述}

各種ツールでの設定方法

Prettier

公式ドキュメントの以下ページの、 --check オプションでフォーマット済みかの確認ができます。

https://prettier.io/docs/en/cli.html#—check

サンプルコード

package.json に npm script を追加
"scripts": {
  "format": "prettier --write .",
  "format:check": "prettier . --check"
},
Job を追加する
name: "Test"


on:
  pull_request:
    branches:
      - develop
      - main


jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4.1.1
      - uses: pnpm/action-setup@v4
        with:
          version: 9.1.0
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: ".node-version"
          cache: "pnpm"
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
     - name: Check with Prettier
       run: pnpm run format:check

以下リポジトリにも同様の設定をしているのでご参考ください。

GitHub - rowicy/web: Rowicy Web Site.
Rowicy Web Site. Contribute to rowicy/web development by creating an account on GitHub.
github.com

Biome

こちらも公式ドキュメントに例が載っています。

継続的インテグレーション
CI環境でのBiomeの使用
biomejs.dev

公式通りに記載いただければ間違いないですが、一応CI用YMLベース構文に合わせた場合のサンプルも記載しておきます。

サンプルコード

package.json に npm script を追加
"scripts": {
  "format": "biome format --write src/ *.ts *.json",
  "lint": "biome lint --write src/ *.ts *.json",
  "biome:ci": "biome ci src/ *.ts *.json"
},
Job を追加する
name: "Test"


on:
  pull_request:
    branches:
      - develop
      - main


jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4.1.1
      - uses: pnpm/action-setup@v4
        with:
          version: 9.1.0
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: ".node-version"
          cache: "pnpm"
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
     - name: Check with Biome
       run: pnpm run biome:ci

以下リポジトリにも同様の設定をしているのでご参考ください。
(事項の Stylelint の設定もしております。)

GitHub - naoki-00-ito/vite-ts-bulma-sass-template: Vite based development templates with simple configuration for TypeScript, Sass, Bulma, etc.
Vite based development templates with simple configuration for TypeScript, Sass, Bulma, etc. - naoki-00-ito/vite-ts-bulma-sass-template
github.com

Stylelint

公式ドキュメント

サンプルコード

package.json に npm script を追加
"scripts": {
  "stylelint": "stylelint --fix 'src/**/*.scss'",
  "stylelint:ci": "stylelint 'src/**/*.scss'"
},
Job を追加する
name: "Test"


on:
  pull_request:
    branches:
      - develop
      - main


jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4.1.1
      - uses: pnpm/action-setup@v4
        with:
          version: 9.1.0
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: ".node-version"
          cache: "pnpm"
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
     - name: Check with Stylelint
       run: pnpm run stylelint:ci
Naoki

Author: Naoki

Frontend Developer

Share

Link is copied.