Biome はじめました。

モチベーション

• そもそも TypeScript や JSX に詳しくないのでどう書くのがいいのか悩みたくない
• ESLint や Prettier の設定を なんとなく 設定して使ってしまっている
• Formatter / Linter 関連のライブラリの内容を理解せずにアップデートしてしまっている
• 依存関係は減らしていきたい
• Rust で書かれた言語向けの高速なツールが好き
  • Rye とか Ruff とか efmt とか

Biome

Biome は Rust で書かれた Formatter / Linter を含むツール。本当におかしいくらい早い。

全然大きくないが、以下のソースコードに適用したときの速度。
https://github.com/shiguredo/sora-devtools/

$ pnpm run fmt
> biome format --write ./src

Formatted 114 file(s) in 11ms

$ pnpm run lint
> biome lint ./src

Checked 114 file(s) in 12ms

biome.jsonc

• 拡張子は jsonc を採用
• Linter
  • "all": true を採用
    • 最初は "recommend": true から入っても良いと思う
  • 対応しないのは明示的に off を指定
  • 少しでもめんどくさいとおもったら気軽に biome-ignore を使う
• Formatter
  • スペース 2
  • 文字列はシングルクオート
  • JSX はダブルクオート
  • セミコロンは必要なときだけ
  • 文字数は 100
  • 末尾カンマ必須

https://github.com/shiguredo/sora-devtools/blob/develop/biome.jsonc

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "quickfix.biome": true,
    "source.organizeImports.biome": true
  }
}

期間限定でゴールドスポンサーになった

本当に頑張ってほしいので、期間限定だがゴールドスポンサーになった。そのうちブロンズに戻る。

ブロンズスポンサー

気に入った OSS のスポンサーになりたい人なので、ブロンズスポンサーになった。

雑感

• 早いのは正義
• こう書くべきだよというのが Linter によって教えて貰えるのでとても良い
• Formatter は最低限に絞っているのがよい
• Discord コミュニティが用意されていて良い
  • https://discord.gg/BypW39g6Yc
• 日本人のコアコントリビューターが 2 名もいらっしゃって、日本語での相談も Discord でできるのはよい
  • https://github.com/nissy-dev
  • https://github.com/unvalley
• VS Code 拡張が公式から提供されていて良い
  • https://github.com/biomejs/biome-vscode
• 依存ライブラリが1つになり、管理するファイルも biome.json だけになって良い
• これから伸びていきそうという気持ちになるのでスポンサーが増えるといいなと思う
  • Biome は企業利用するのにも向いていると思う
• Linter は "all": true で気に食わないのを off にしていくのがオススメ
• workspace を使ってるとき biome.json をトップレベルに置いておくだけでイイ
  • 上へ上へと探しに行ってくれる

不満

• biome.json なのでコメントが書けなくてツライ
  • Linter の場合は「なぜ無効にしているのか」というお気持ちを書いておきたい
  • JSON だからしょうがないとは思う
  • biome 1.6.0 で jsonc が利用できるようになり、コメントが書けるようになった
• forEach は使うなっていわれるのだが RTCStatsReport の forEach も怒られてツライ
  • 型を見てるわけではないと思うのでしょうがないとは思う

日本語参考資料

• フォーマッターとリンターを兼ね備えた「Biome」を触ってみる
  • おそらく日本語解説のために Linter の設定に全ての設定を書いてくれているが、"all": true でいいので心配しないでほしい
• Biome と ESLint の lint ルールの互換性
  • コアコントリビュータの方が書かれていて、とても参考になるが設定が少し古いので要注意。

英語参考資料

• Deep dive into Biome in JSConf 2023 - Speaker Deck
  • コアコントリビューターの発表資料
  • 動画もある https://youtu.be/N1lhkH33fwY?t=1385

サンプルコード用 biome.json

• 独自設定をできるだけ減らす

{
  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "all": true,
      "style": {
        "useNamingConvention": "off",
        "noNonNullAssertion": "off"
      },
      "suspicious": {
        "noConsoleLog": "off"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "ignore": [],
    "indentStyle": "space"
  },
  "json": {
    "parser": {
      "allowComments": true
    },
    "formatter": {
      "enabled": true,
      "indentStyle": "space"
    }
  },
  "javascript": {
    "formatter": {
      "enabled": true,
      "indentStyle": "space"
    }
  }
}