Biome を試してみた

はじめに

フロントエンドの開発で ESLint + Prettier の設定、毎回やるたびに地味に面倒だなと思ってました。

最近よく名前を聞く Biome が気になってたので、今回遅ればせながら試してみました。

Biome とは

Biome は Rust 製で、ESLint + Prettier を 1 つのツールに統合したものらしいです。

設定ファイルも 1 つで済みます。

毎回どれいれたらいいか悩むので、これはよさそう。

環境

Node.js が入っていれば OK です。

node -v
# v22.x.x

セットアップ

npm install --save-dev --exact @biomejs/biome
npx @biomejs/biome init

これだけで biome.json が生成されます。

生成された biome.json はこんな感じ。

{
  "$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

formatterを試す

こんな感じのコードを用意します。

const greet = (    name,age) => {
console.log("hello "+name + " you are "+age)
}
greet(  "taro",25  )

フォーマットを実行します。

npx biome format --write ./src

const greet = (name, age) => {
    console.log("hello " + name + " you are " + age);
};
greet("taro", 25);

おー。うごいた。

linterを試す

npx biome lint ./src

src/index.js:2:2 lint/suspicious/noConsoleLog ━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Don't use console.log
  
  1 │ const greet = (name, age) => {
> 2 │  console.log("hello " + name + " you are " + age);
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 │ };
  
  ℹ console.log is usually a tool for debugging and
    shouldn't be shipped in production.

いい感じ！

check コマンドが便利

formatとlintをまとめて実行できます。

npx biome check --write ./src

1 コマンドで済むのは地味に便利。

import の並び順も自動で整理してくれます。

昔は eslint-plugin-import を入れて設定して…みたいなことをやっていた記憶があるので、標準でやってくれるのありがたい。

Vue にも対応してた

Biome は Vue 対応してないって事前情報をもってたのですが、調べてみたら v2.3 から .vue / .svelte / .astro ファイルのフルサポートが入ってました。

従来は <script> と <style> 部分しか対応してなかったのが、<template> 部分の lint や format もできるようになったとのこと。

まだ試験的な機能なので、biome.json に設定を追加する必要があります。

{
  "html": {
    "formatter": {
      "enabled": true
    },
    "experimentalFullSupportEnabled": true
  }
}

例えばこんな雑な Vue コンポーネントに対しても、

<template>
  <div>
              <span :class="foo">broken bind</span>
  </div>
</template>

format を実行すればインデントを直してくれます。

自分はVueプロジェクトに入ってるので、かなり嬉しい。

ただ、まだちょこっとバグはあるみたいです。

まとめ

なんにも考えずBiomeいれてフォーマットっていう感じで、個人開発では使いやすそうでした。

ではでは。