Next.jsのformat/lint用にBiomeを設定しました

Next.jsでアプリを作り始めて、フォーマッタを設定しないと使いづらいので、設定してみました。

Biomeとは
インストール
vscodeに設定
さいごに

Biomeとは

formatterとlintといえば、PrettierとESLintを考えたのですが、調べたらBiomeというのが主流になりつつあるので、使ってみることにしました。

Biomeは JavaScript、TypeScript、JSX、JSON、CSS そして GraphQL のための高速なフォーマッタ であり、Prettier と97%の互換性を持ち、CIと開発者の時間を節約します。

Biome

フォーマット、リントなどが一瞬で完了します！

より

インストール

以下のコマンドでインストール出来ます。

npm install -D @biomejs/biome

また、npxコマンドでlintとformatを実行できるので、package.jsonに設定します。
lintとformatを同時に実施してくれるcheckを登録します。

{
  "name": "next-apps",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "check": "npx @biomejs/biome check --write ./src"
  },

biomeの設定ファイルである、biome.jsonを作成します。
今回はシンプルに有効にする内容にします。

{
  "$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space"
  },
  "linter": {
    "enabled": true
  },
  "assist": {
    "enabled": true
  }
}

vscodeに設定

コマンドを追加しても、都度自分で実行するのは面倒です。
vscodeの拡張機能もあるので、設定します。

Biome - Visual Studio Marketplace

Extension for Visual Studio Code - Toolchain of the web

他のPCでも設定するために、vscodeの設定に追加します。

まずは、拡張機能を推奨されるように .vscode/extensions.json に設定します。

{
  "recommendations": [
    "biomejs.biome"
  ]
}

そして、ファイルを保存した際にフォーマットされるように、.vscode/settings.json に設定します。

{
  "biome.enabled": true,
  "biome.requireConfiguration": true,
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

vscodeにどのような設定ができるかは、公式ドキュメントがあるのでカスタマイズする際は参考にしてください。

VS Code拡張機能

BiomeのVS Code拡張機能

さいごに

開発する際に、勝手にフォーマットしてくれるかどうかで体験が変わるので、設定してよかったです。

使いながら設定を育てていきたいと思います。