【Tips - Biome】実例でわかるシリーズ - World Hacker（ぎょうざブログ）

みなさんどうも、こんばんみ～。ぎょうざです。

はい、今更ながらフォーマッターとリンターが合体したようなコード整形ツール

Biome（バイオーム）を利用する際に、ぎょうざが躓いたところを備忘録として記録しておきます。

同じようなケースあるいは現象で困っている方の参考になれば幸いです。

【過去の紹介記事】

【多分これが一番キレイだと思います】Prettier+ESLint？それともBiome？ - World Hacker（ぎょうざブログ）

Think Different, Connect Dots for Line.

https://gyozaless.com

【目次】

＜Useful＞ ▶ 行単位でフォーマッターを無効化したい ▶ Import文を自動でソートしたい＜Error＞ ▶ ＜Warn＞ ▶ 〆の一言

＜Useful＞

▶ 行単位でフォーマッターを無効化したい

現象：フォーマット実行後に、下記の理想とするソースコードに整形されない。

// フォーマット実行後の理想
const iconMap: Record<Category['name'], IconType> = {
  "Music": FcMusic,
  "Photography": FcOldTimeCamera,
  "Fitness": FcSportsMode,
  "Accounting": FcSalesPerformance,
  "Computer Science": FcMultipleDevices,
  "Filming": FcFilmReel,
  "Engineering": FcEngineering,
}

// フォーマット実行後の現実
const iconMap: Record<Category['name'], IconType> = {
  Music: FcMusic,
  Photography: FcOldTimeCamera,
  Fitness: FcSportsMode,
  Accounting: FcSalesPerformance,
  "Computer Science": FcMultipleDevices,
  Filming: FcFilmReel,
  Engineering: FcEngineering,
}

原因：Biomeが、VSCodeのsetting.jsonファイル、にデフォルトフォーマッターとして設定できておらず、// biome-ignore format: "任意の理由" がルール無視したいソースコードの箇所に記述されていなかった。
解決策：

// Biomeのルール無視を明示しないと、設定に従い
// 単一単語の文字列の変数からはダブルクオートが外れる
const iconMap: Record<Category['name'], IconType> = {
  Music: FcMusic,
  Photography: FcOldTimeCamera,
  Fitness: FcSportsMode,
  Accounting: FcSalesPerformance,
  "Computer Science": FcMultipleDevices,
  Filming: FcFilmReel,
  Engineering": FcEngineering,
}

// biome-ignore format: (なくてもOK)"理由を書く"
const iconMap: Record<Category['name'], IconType> = {
  "Music": FcMusic,
  "Photography": FcOldTimeCamera,
  "Fitness": FcSportsMode,
  "Accounting": FcSalesPerformance,
  "Computer Science": FcMultipleDevices,
  "Filming": FcFilmReel,
  "Engineering": FcEngineering,
}

▶ Import文を自動でソートしたい

現象：Import文をBiomeの仕様（公式ドキュメント：https://biomejs.dev/ja/analyzer/import-sorting/）に従い、自動ソートできない。
原因：VSCodeの設定ファイルに自動ソート設定が記述されていない。
解決策：「VSCodeのコマンドパレットを開く」→「設定ファイルを開く」→開いた json ファイルに以下を記述する。

// 対象ファイル：(各自のユーザーフォルダにあるVSCodeのアプリデータがあるディレクトリ上の)settings.json
{
  (中略),
  "editor.codeActionsOnSave": {
	  // ファイル保存時にImport文をソートさせる設定
    "source.organizeImports.biome": "explicit"
  },
  (中略)
}

※自動ソートをさせたくない方は、ワークスペース（またはプロジェクト）のルートディレクトリにある biome.json に以下を記述する

// 対象ファイル：(各自のワークスペースのルートディレクトリにある)biome.json
{
  (中略),
  "organizeImports": {
    "enabled": false
  },
  (中略)
}

＜Error＞

▶

＜Warn＞

▶

〆の一言

Biomeは、フォーマッターとリンターのを兼ね備えた便利なコード整形ツールです。
細かくソースコード整形ルールを設定したい、整形の実行速度を速くしたい方におすすめです。

ここまで読んでいただき、ありがとうございました。

以上、ぎょうざでした。

World Hacker（ぎょうざブログ）

【Tips - Biome】実例でわかるシリーズ