Biome はじめました。

モチベーション

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

Biome

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

$ 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.json

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

.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
  }
}

voluntas 5ヶ月前に更新

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

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

ブロンズスポンサー

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

voluntas 1ヶ月前に更新

雑感

早いのは正義
こう書くべきだよというのが 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 も怒られてツライ
- 型を見てるわけではないと思うのでしょうがないとは思う

voluntas 5ヶ月前に更新

日本語参考資料

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

英語参考資料

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

voluntas 5ヶ月前に更新

サンプルコード用 biome.json

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

{
  "$schema": "https://biomejs.dev/schemas/1.3.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "all": true
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "ignore": [],
    "indentStyle": "space"
  },
  "json": {
    "parser": {
      "allowComments": true
    },
    "formatter": {
      "enabled": true,
      "indentStyle": "space"
    }
  },
  "javascript": {
    "formatter": {
      "enabled": true,
      "indentStyle": "space"
    }
  }
}