biomeを触ってみる

Hirotaka Miyagi

ここをみながらbiomeを触ってみる

Hirotaka Miyagi

依存に追加

設定ファイルを追加

Hirotaka Miyagi

この状態でlintを実行すると結構な数のエラーが出る。デフォルトの設定が結構違うんだなー

pnpm exec biome lint .

... 省略 ...

The number of diagnostics exceeds the number allowed by Biome.
Diagnostics not shown: 5246.
Checked 1451 file(s) in 251ms
Found 174 error(s)
Skipped 13 file(s)

Hirotaka Miyagi

formatterの設定を見ていく

https://biomejs.dev/ja/formatter/

Biomeは、スタイル関する議論に終止符を打つことを目的とした「opinionated」なformatterです。 Prettierと近い哲学を持ち、スタイルに関する議論がBiomeのオプションに関する議論に発展するのを避けるために、いくつかのオプションのみをサポートしています。チーム内での本質的でない議論を防ぎ、本当に重要なことに集中できるようにするために、新しいオプションを意図的に追加しないようにしています。

おー、よさそう

Hirotaka Miyagi

biomeに.gitignoreファイルで指定されたファイルを無視して欲しい時は以下の設定にする

  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  }

ref: https://biomejs.dev/reference/configuration/#vcsuseignorefile

Hirotaka Miyagi

こんな感じで現状のprettierの設定との差分はなくなった
デフォルト厨なのでjavascript周りの設定は後で無くしても良いかも

Hirotaka Miyagi

現状このプラグインを使っているので、代替をどうするかは考える必要がありそう
プラグインシステムみたいなものがあるなら移行できるかもなあ

Hirotaka Miyagi

Markdownファイルのフォーマットしてくれないのは地味にきついなー

現状はCSSのParcingとFormattingに取り組んでいて、続いてHTMLのサポートに進むのかな

Hirotaka Miyagi

Analyzerの設定を見てみる
現状はImport Statementのソートを提供しているとのこと。これはlinterやformatterとは別なのか

https://biomejs.dev/analyzer/

Hirotaka Miyagi

pnpm exec biome check . --apply で反映できる

Hirotaka Miyagi

eslint / prettier からの移行方針

prettierは以下のプラグインが使えなくなるが、それが気にならなければ移行できそう
- https://www.npmjs.com/package/prettier-plugin-packagejson
- https://github.com/tailwindlabs/prettier-plugin-tailwindcss
eslintは https://github.com/uhyo/eslint-plugin-import-access が使えないのは結構致命的なので、biomeに移行できるルールは移行する形で併存することになりそう

Hirotaka Miyagi

eslint

biomeと競合するlint ruleを都度offにしていく