🔧

Biome2.0のGritQLプラグインでDOM要素の直接利用を禁止してみた

2025/07/14に公開

 はじめにClaude CodeなどのAI Agentを使ってコーディングを行う際に、プロジェクト固有のUIライブラリやデザインシステムを使ってくれなかった経験はありませんか。

これらを指示文に明記しても、コンテキストが大きいと忘れてしまい、従ってくれない場合があります。

このような場合、ESLintやBiomeなどのLinterを使って、プロジェクト固有のコーディング規約を自動化できます。

ただし、ESLintは実行速度の問題があり、AI Agentと組み合わせて使う際のiteration速度を遅くする要因となりえます。
そこで、この記事では先日v2.0がリリースされ、Beta版として提供が開始されたGritQLプラグインを使って、Biomeでプロジェクト固有のコーディング規約を自動化する方法を紹介します。

 GritQLとはhttps://docs.grit.io/
GritQLはBiomeがPluginとして採用した、コードパターンを記述するためのクエリ言語です。

Biomeのプラグインシステムを使用することで、プロジェクト固有のルールを定義し、コードベース全体に適用できます。

 プラグインファイルの作成GritQLプラグインは、.grit拡張子を持つファイルで定義されます。
格納先のディレクトリに制約は無いため、好きな名称で作成できます。

今回は、biome-rulesというディレクトリを作成します。
ファイル名についても制約はありませんが、Biomeのルール名と統一し、kebab-caseが良さそうです。

今回はno-lowercase-jsx-components.gritとしました。
biome-rules
└── no-lowercase-jsx-components.grit

 実装例コードは以下のように記述します。
language js

or {
  `<$tag />`,
  `<$tag $_ />`,
  `<$tag>$_</$_>`,
  `<$tag $_>$_</$_>`
} where {
  $tag <: r"^[a-z][a-z0-9-]*$",
  register_diagnostic(
    span = $tag,
    message = "Do not use direct DOM elements. Use the project's design system instead.",
    severity = "error"
  )
}
シンタックスハイライトにはまだ対応していないのが残念です。

 コードの解説このGritQLクエリは以下の動作をします。

or句で複数のJSXパターンを定義: 自己閉じタグとコンテンツありタグに対応

where句で正規表現パターン: r"^[a-z][a-z0-9-]*$"により小文字で始まるHTMLタグを検出

エラーメッセージ: デザインシステムの使用を促すメッセージを表示
単体のタグ、閉じタグあり、propsの有無により認識してくれない事があったため、orを使って複数のパターンを定義しました。
GritQLでは、functionを使って関数を定義可能です。

register_diagnosticという関数はBiomeが提供している関数で、これを使うことで、Biomeにエラー情報の登録ができます。

 Biome設定での有効化biome.jsonのpluginsセクションにプラグインを追加します。
{
  "linter": {
    "rules": {
      ...,
    }
  },
	"plugins": ["rules/no-lowercase-jsx-components.grit"]
}
実際に実行してみます。
biome check ./src
これでプラグインを有効化できました。
VSCodeを再起動した後、エディタ上でもエラーが表示されるようになります。

 ルールの一時的な無効化特定の箇所でルールを無効化したい場合は、以下のコメントを使用します。
// biome-ignore lint: plugin
<div>この箇所ではプラグインを無効化</div>
これはドキュメントに記載されていなかったので、実際に試してみて発見しました。

Biomeの標準ルールの場合は名前で無効化できますが、GritQLプラグインの場合はpluginを指定します。

特定のルールのみの無効化は現時点ではサポートされていないようです。

 まとめBiomeのGritQLプラグインの書き方を紹介しました。

他のツールと比較して、宣言的な記述が可能で優れています。

まだGritQLプラグインを使っている記事はネット上で見当たらず、情報が少なかったため、Claude Codeはこの記事を参考として実装できるようになってくれると良いですね。

今後もGritQLプラグインを使ったルールを追加していく予定です。

GitHubで編集を提案

はじめに

GritQLとは

プラグインファイルの作成

実装例

コードの解説

Biome設定での有効化

ルールの一時的な無効化

まとめ

Discussion