Skip to content

Bun Biome

Biomeを使用し、format

Add Package

sh
bun add -D @biomejs/biome
json
{
  "devDependencies": {
    "@biomejs/biome": "^1.8.3"
  }
}

biome.jsonの作成

sh
bunx biome init
json
{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "organizeImports": {
    "enabled": false
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

formatterの設定

json
{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "organizeImports": {
    "enabled": true
  },

  "formatter": {
    // Biomeのformatterを有効にするかどうか
    // 設定しなくても、デフォルトはtrue
    // falseにすると無効
    "enabled": true,
    // foramtの対象外ファイル
    "ignore": ["./node_modules/**"],
    // foramtの対象ファイル
    "include": ["**/*.ts", "**/*.tsx", "**/*.vue", "**/*.json"],
    "indentStyle": "space",
    // 設定しなくても、デフォルトは2
    "indentWidth": 2,
    "lineWidth": 120
  },

  "javascript": {
    "formatter": {
      // 必要な場所にのみセミコロンが追加される
      "semicolons": "asNeeded",
      // シングルクォートを使用
      "quoteStyle": "single",
      // jsxQuoteStyleを設定すると
      "jsxQuoteStyle": "single"
      // format前 <meta charset="utf-8" />
      // format後 <meta charset='utf-8' />
    }
  },
  
  // jsonの項目も設定可能。tsのコードと合わせておく。
  "json": {
    "formatter": {
      // Biomeのformatterを有効にするかどうか
      // 設定しなくても、デフォルトはtrue
      // falseにすると無効
      "enabled": true,
      "indentStyle": "space",
      "indentWidth": 2
    }
  },

  // linter
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

Command

 以下のコマンドでformat実行可能。

sh
bunx biome format --write <files>

<files>で、format対象を指定できる。

 何も指定しない場合、現在のディレクトリ以下が対象。

sh
bunx biome format --write

Example

./以下をformat

sh
bunx biome format --write ./

./apps/以下をformat

sh
bunx biome format --write ./apps/

./apps/react/以下をformat

sh
bunx biome format --write ./apps/react/

./apps/hono/以下をformat

sh
bunx biome format --write ./apps/hono/

Makefileで楽に使う。

 Makefileがあるディレクトリでmake fmtを実行すると、foramt可能。

Makefile
# format
fmt:
	bunx biome format --write ./