X(Twitter) Zenn GitHub RSS 共有

Biome

作成日時：2023-11-08
更新日時：2023-11-08

Biome(バイオーム) とは

JavaScript / TypeScript等のFormatter / Linter。
公式では

Biome is a toolchain for web projects, it aims to provide developer tools to maintain the health of said projects.
(https://github.com/biomejs/biomeより)

Google翻訳すると

Biomeは Web プロジェクト用のツールチェーンであり、プロジェクトの健全性を維持するための開発者ツールを提供することを目的としています。

と説明している。

サイト
GitHub
ライセンスはMIT / Apache2.0

参考

良いと思った点

Linter初心者の意見。
経験者の意見は「参考」にあるサイトを参照。

早い

！注意！
Linterを初めて使うから適切な設定が分からない。
なのでBiome / ESLintどちらもデフォルトの設定で計測することにした。
計測結果は正しくないかもしれない。

エラー内容が親切

  × Template literals are preferred over string concatenation.

    32 │             }
    33 │         }
  > 34 │         setPoint(sum + " / " + total + " = " + (sum / total));
       │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    35 │     }
    36 │ 

  i Unsafe fix: Use a template literal.

    32 32 │               }
    33 33 │           }
    34    │ - ········setPoint(sum·+·"·/·"·+·total·+·"·=·"·+·(sum·/·total));
       34 │ + ········setPoint(`${sum}·/·${total}·=·${sum·/·total}`);
    35 35 │       }
    36 36 │

導入と設定が楽

a11yのチェックがデフォで入っているっぽい

トラブルシューティング

Lintを実行したら「The number of diagnostics exceeds the number allowed by Biome.」と出た

The number of diagnostics exceeds the number allowed by Biome.
Diagnostics not shown: XXX.

エラー数が多すぎると出てくる警告。気にする必要無し。
「診断数が許容値を超えてますよ。XXX件の診断が表示できません。」という意味。

解決法はlintコマンドにオプションで --max-diagnostics=XXX をつける。
この数値が1回のコマンドで表示できる診断の数らしい。
デフォルト20でMAX 200。

解析結果がコンソール上だと見づらいので、出力をファイルにリダイレクトしたら文字化けした

npm run lint > result.txt

Windowsだもの。多分MacやLinuxだと文字化けしない。
WSL上でコマンド叩いたらちゃんと出た。

Warning: React version not specified in eslint-plugin-react settings. See ～

React17以降を使っているとこの警告が出るらしい。
対応はhttps://zenn.dev/marumarumeruru/scraps/d08e54c461de2b

感想とか色々