少し前になりますが、Biomeの公式サイトでv2正式リリースが発表されました！今回はv2のリリース内容をまとめていきます。
リリース内容
リリース内容は主に6内容が新しくリリースされました。
- マルチファイル分析と型推論: プロジェクト全体を横断した高度な型チェックが可能に
- モノレポサポートの強化: ネストされた設定ファイルに対応し、大規模なリポジトリでの利便性が向上
- プラグイン機能の導入: 限定的ながらも、カスタムルールを作成できるプラグインが登場
- インポートオーガナイザーの刷新: より柔軟で強力なインポート文の並べ替え機能
- Biomeアシスト機能: リンター診断なしでコードの改善提案を行う新機能
- HTMLフォーマッタ機能: VueやSvelteなど、今後のフレームワークサポートに向けた大きな一歩
マルチファイル分析と型推論
元々はファイル1つずつしか見ることができませんでしたが、v2は複数のファイルをまたいだ分析が可能になりました！
また、型推論の導入のお陰でTypeScriptのコンパイラを利用せずに独自の型を推論することができるようになりました！
パフォーマンスがTypeScriptのコンパイラを利用しないので早いですが、正確ではありません。こちらもv2なので今後に期待する機能にはなりますね！
モノレポサポートの強化
従来、biome.jsonはプロジェクトのルートディレクトリに1つしか置けませんでしたが、v2からは、モノレポ内の各パッケージ（サブディレクトリ）にもbiome.jsonを配置できるようになりました。
これにより、「フロントエンド用のパッケージ」と「サーバー用のパッケージ」が同居している場合、それぞれに異なるLinterルールやFormatter設定を適用することが可能になります！
プラグイン機能の導入
ロードマップ](https://biomejs.dev/ja/blog/roadmap-2025/)の方でも記載がありましたが、v2interプラグインが実装されました。
現時点ではコードスニペットを一致させて診断結果を報告することしかできませんが、今後が楽しみな機能でもあります！！
インポートオーガナイザーの刷新
v1できましたが、色々な制限がありました。
空行を越えた並べ替え
従来は、インポート文の間に空行があると、その空行を境にグループが分断され、グループ内での並べ替えしかできませんでした。
import { lib2 } from "library2";
import { util } from "./utils.js";
import { lib1 } from "library1";
v1は下記のようにしか並び替えられませんでした。
import { lib2 } from "library2";
import { lib1 } from "library1";
import { util } from "./utils.js";
しかし、v2からは下記のように自動的に並び替えられます。
import { lib1 } from "library1";
import { lib2 } from "library2";
import { util } from "./utils.js";
同一モジュールからのインポートのマージ
これはv1はできず、v2からできるようになりました。
import { util1 } from "./utils.js";
import { util2 } from "./utils.js";
が下記のように並び替えられます。
import { util1, util2 } from "./utils.js";
カスタム順序設定
基本的には下記がデフォルトの順番になります。
- 名前空間型のインポート / 名前空間型のエクスポート
- デフォルトタイプのインポート
- 名前付き型のインポート / 名前付き型のエクスポート
- 名前空間のインポート / 名前空間のエクスポート
- デフォルトと名前空間のインポートの組み合わせ
- デフォルトのインポート
- デフォルトと名前付きインポートの組み合わせ
- 名前付きインポート/名前付きエクスポート
これが気に入らなかった場合は、biome.jsonファイルにgroupsという項目を追加してインポート文の順番を設定していきます。
主なマッチャーの種類
| マッチャーの種類 | 説明 | 例 |
|---|---|---|
| :PACKAGE: | npmやyarnでインストールした外部パッケージ | import React from "react"; |
| :NODE: | Node.jsの組み込みモジュール | import fs from "fs"; |
| :URL: | URLからの直接インポート | import a from "https://example.com/a"; |
| :ALIAS: | tsconfig.jsonなどで設定したパスエイリアス | import a from "@/components/a"; |
| { "type": true } | 型定義のインポート (import type ...) | import type { A } from "a"; |
| グロブパターン | プロジェクト内の特定のパス | import a from "../lib/a"; |
例えばですが、デフォルトの並び替えだと以下のようになるものが
// 1. 名前空間"型"のインポート
import type * as ReactTypes from 'react';
// 3. 名前付き"型"のインポート
import type { User } from '@/types';
// 4. 名前空間のインポート
import * as Framer from 'framer-motion';
// 6. デフォルトのインポート
import React from 'react';
// 7. デフォルトと名前付きインポートの組み合わせ
import Main, { MainProps } from '@/components/Main';
// 8. 名前付きインポート
import { useUser } from '../hooks/useUser';
import { cn } from '../utils/cn';
下記のような設定を追加するだけで順番をカスタマイズ出来ます！
{
"organizeImports": {
"groups": [
// 1. Reactを一番上に
"react",
// 2. その他の外部パッケージ
":PACKAGE:",
// 3. 空行
":BLANK_LINE:",
// 4. パスエイリアス
":ALIAS:",
// 5. 相対パス
"../",
"./",
// 6. 空行
":BLANK_LINE:",
// 7. 型定義
{ "type": true }
]
}
}
設定後の並び順
// ルール1: "react"
import React from 'react';
// ルール2: その他の外部パッケージ (:PACKAGE:)
import * as Framer from 'framer-motion';
// ルール3: 空行
// ルール4: パスエイリアス (:ALIAS:)
import Main, { MainProps } from '@/components/Main';
// ルール5: 相対パス ("../", "./")
import { useUser } from '../hooks/useUser';
import { cn } from '../utils/cn';
// ルール6: 空行
// ルール7: 型定義 ({ "type": true })
import type * as ReactTypes from 'react';
import type { User } from '@/types';
Biomeアシスト機能
AssistはLinterのコードの「間違い」や「潜在的なバグ」を指摘(診断)するのとは、違い診断(エラーや警告)をしません。その代わりに、「必須ではないけれど、こうすればもっと良くなる」っていう改善案を提示してくれ、ワンクリックで修正できるような機能になっています。
現在は下記が少しにはなりますが対応しています。
HTMLフォーマッタ機能
こちらもロードマップで明示されていた機能になります！
現時点では対応ファイルは.htmlのみと更にJavascriptやCSSなどの埋め込み言語に対しても対応していなかったりと実験段階の機能ではあります！
まだ、HTMLフォーマッタはv2では正式リリースではないのでデフォルトでは設定は無効になっております。
下記のように設定を追加することでHTMLフォーマッタを試すことが可能になります。
{
"html": {
"formatter": {
"enabled": true
}
}
}
まとめ
前から気になっていた、HTMLフォーマッタが正式版ではないにしろリリースされて、あともう少しで.vueや.svelteなどのファイルも一緒にフォーマッタしてくれるようになればどのような案件でも使用できそうですし、他の機能もどんどん揃ってきているので今後もBiomeからは目が離せません！！
Discussion