bun + biomeでイケてるTypeScript環境を作りたい！(vscodeの設定付き)

はじめに

最近TypeScriptに入門したのですが、どうせ勉強するなら新しくてイケてる環境を作りたい！ということで、今回はvscode+bun+biomeでいい感じの環境を作っていこうと思います！

イケてる環境とは？実現したいこと

• TypeScriptが動く環境をサクッと作りたい
• ライブラリのインストールやテストの実行が爆速の環境を作りたい
• vscode上で「ctrl + s」でセーブした時にLintやFormatが自動で効くようにしたい

環境

• Windows(wsl2)
• vscode

作成方法

bunのinstall

今回はwsl2上で行うのでLinux用のコマンドでインストールします。windowsやmacの方はInstallationのページを見て適宜読み替えてください

$ curl -fsSL https://bun.sh/install | bash

bunでのプロジェクト作成

bunを使ってプロジェクトの初期設定を行います！基本的にはbun initを使うのですが、Next.jsなどよく使うものはbun側でTemplateを作成しているので使ってみましょう！

# bunのプロジェクト作成コマンド
$ bun init

# Next.jsの場合はこっち
$ bun create next-app .

biomeのインストール

bunでbiomeをインストールする

Linter&Formatterのbiomeをインストールします。後々vscodeの機能でコードのオートフォーマットなどを実現するために必要です。

$ bun add -d @biomejs/biome

設定ファイルを出力する

下記のコマンドで設定ファイルbiome.jsoncを出力することができます！

biome init --jsonc

vscodeの設定

biomeの拡張機能のインストール

vscode上のExtensionsでbiomeと検索し、拡張機能をインストールします。

vscode/settings.jsonの設定

この設定で実現するのは以下

• デフォルトフォーマッターをbiomeに設定する
• ファイル保存をしたらフォーマットされる
  • biomeを使って自動でフォーマットをかける
  • biomeを使ってimport文を自動でフォーマットをかける
• ファイルを1秒後に自動保存する

{
    "editor.defaultFormatter":　"biomejs.biome",
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
		"quickfix.biome": "always",
		"source.organizeImports.biome": "always"
	},
	"files.autoSave": "afterDelay",
	"files.autoSaveDelay": 1000,
	
}

（おまけ）bunでyarn.lockを出力する

bun.lockbは、Bunのロックファイルで、速度向上のためにバイナリ形式となっています。人が読める形式のロックファイルを出力するには、bun install -yコマンドを使用してyarn.lockを生成する必要があります。
ライブラリをインストールした際は、同時に下記コマンドを実行することをおすすめします！

$ bun install -y
→yarn.lockが出力される

おわりに

biomeなどのFormatterなどが最初からちゃんと設定してあるとコードの品質が統一されやすくなりますね！
bunのオールインワンパッケージの思想も開発初期のスピードを高めてくれるのでとても好きです！
ぜひ試してみてください！