🫵

BiomeのReporters機能を活用してコードの品質を上げやすくしよう！

2024/12/19に公開

GitHub

この記事は「めぐろLT Advent Calendar 2024」ー 19日目の記事です

どうもK1mu21です

皆さんはフロントエンドの静的解析ツール、フォーマッターは何を使っていますか？
ESLint+Prettierが主流だと思いますが、最近自分が携わったプロジェクトではBiomeを導入しましたので少し紹介します！

Biomeとは

Biomeはフロントエンドの静的解析、フォーマッターをしてくれるツールになります
Rustで作られているので実行速度がESLint+Prettierよりも早いのが特徴になっています

詳細はドキュメントをご覧ください

https://biomejs.dev

Reportersについて

BiomeのVersion1.8.0から、BiomeのCLIは、解析結果をターミナルに表示する方法を変更できるオプションとして--reporter引数が使えるようになりました

biome check --reporter=summary

以下のコマンドをGitHub Actionsで使い、PR Workflowで適切に設定すると、GitHub上で発行された情報/警告/エラーごとにメッセージを出力してくれます

biome ci --reporter=github

上のドキュメントにはありませんが、BiomeのVersion1.9.0からGitLabのCodeQuarity形式で出力することも可能になりました

biome ci --reporter=gitlab

GitLabでの使い方のイメージ

gitlab-ci.yml

stages:
    ~~~
    -lint
    -test
    ~~~

include:
    - template: Jobs/Code-Quality.gitlab-ci.yml

~~~
test:
    ~~~
    stage: test
    ~~~
~~~

biome-lint:
    image: hogehoge
    stage: lint
    before_script:
        - mkdir -p $CI_PROJECT_DIR/.biome
    script:
        // 静的解析結果をgl-gode-quarity-report.jsonへ出力するようにしている
        - npx @biomejs/biome lint . --reporter=gitlab --max-diagnostics=none > $CI_PROJECT_DIR/.biome/gl-code-quarity-report.json
    tags:
        - dockerのrunner
    artifacts:
        path: [.biome/]
        expose_as: biome-lint
        reports:
            codequarity: .biome/gl-code-quarity-report.json

~~~
code_quarity:
~~~

biome.json

  "files": {
    "ignore": ["gl-code-quarity-report.json"]
  }

上記のような設定で、GitLabのMR上にCodeQuarityを使って静的解析の結果を出すことができます！
ぜひ参考にしてみてください!

このような感じで結果を表示することができます
codequarityのイメージ

まとめ

Biomeを使っているならReportersも使いましょう！
解析結果をPR上などに表示させると、かなり使いやすくなるのでコードの修正がとても楽になります！
つまり品質が上げやすくなるってコト...!?

ちょっと脱線しますがEslintでも、Github Actionsを使ってPR上に結果を表示させることができるはずなので、最低限それだけは導入することをお勧めします！