Biome の導入 〜 設定まで

最近巷で話題の biome を ESLint と  Prettier の代わりに導入してみようと思います。
導入 〜 設定までの備忘録として記事にしようと思います。
今回はReact や Next のプロジェクトが既に立ち上がってる状態を前提としています。
この記事では npm で導入していきます。

## Biome とは
もともと Rome という、lint や format、build、test といった開発ツールを１つに集約することを目指したプロジェクトがありました。
この Rome の主要メンバーによってフォークされて Biome が生まれたらしいです。

[Biome](https://biomejs.dev/) は JavaScript/TypeScript の 「Linter と formatter が一緒になったもの」という理解でひとまず良さそうですね。
format としては、Prettier とは 97% の互換性があり、Linter としては ESLint などから [303個のルール](https://biomejs.dev/linter/rules/)があります。

## インストール
早速インストールしてみましょう！
[公式](https://biomejs.dev/guides/getting-started/)では node のバージョンが14.18以降が必要なようです。
```
npm install --save-dev --save-exact @biomejs/biome
```

## 設定

### 設定ファイルの生成

```
npx @biomejs/biome init
```
このコマンドで `biome.json`が生成されます。
この設定ファイルで linter や formmater の設定を行います。
初期設定では 推奨ルールが有効になってそうです。

### biome.json の設定
今回はとりあえず下記のような設定にしました。
この辺は[設定](https://biomejs.dev/ja/reference/configuration/)などを参照して自由にやっちゃっていいと思います。
```json: biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": {
    "ignoreUnknown": false,
    "ignore": [
      "**/node_modules/**",
      "./.next/**",
      "./coverage/**",
      "./tsconfig.json"
    ]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noNonNullAssertion": "off"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "single",
      "semicolons": "asNeeded",
      "trailingCommas": "none"
    }
  }
}

```

### 実行
[CLI](https://biomejs.dev/ja/reference/cli/)を参照し、実際に動かしてみましょう。
よく使いそうなコマンドはこんな感じです。
option の `--write`で実際に書き換えてくれます。
`apply`もあるけど非推奨のようですね。

```vim
# format を走らせる
npx biome format --write ./src
# lint (check only) を走らせる
npx biome lint ./src
# lint fix linter を走らせる
npx biome lint --write ./src
# import, format, linter を走らせる
npx biome check --write ./src
```

### script に追加
上記のコマンドを毎回打ってもいいですが、せっかくなので `package.json`の script に追加しました。
今回は root から biome を走らせてます。
ignore したり、`biome lint ./src`のようにディレクトリ指定したりと調整すると良さそうです。

```json: package.json
"scripts": {
    ...
    "lint": "biome lint ./",
    "lint:fix": "biome lint --write ./",
    "format": "biome format --write ./",
    "check": "biome check --write ./",
  },
```

## VSCode の拡張機能
VSCode で Biome を使用する場合は下記の拡張機能が便利です。
これでVSCode で Biome を実行できます。

https://marketplace.visualstudio.com/items?itemName=biomejs.biome

## Biome を実行する設定を settings.json  に記載
`.vscode`配下の`settings.json`に設定を記載します。
これで保存時に Biome で整形してくれます。

```json: settings.json
{
  "editor.formatOnSave": true, // 保存時のフォーマット有効化
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}
```

##  参考
- [Biome の導入と設定方法まとめ](https://arc.net/l/quote/khrzyzsn)
    - こちらの方がより詳しくまとめられております。
- [VSCodeでファイル保存時にBiomeを適用させる](https://zenn.dev/levtech/articles/cc03a0f4d4dd47#settings.json%E3%81%ABbiome%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E8%A8%AD%E5%AE%9A%E3%82%92%E8%A8%98%E8%BC%89%E3%81%99%E3%82%8B)
    - 保存時に元々拡張機能として入っていた Prettier と衝突してたようなので非常に助かりました。