最高の TypeScript 開発環境を最速で作っていくよ 2025 秋
この記事では、TypeScript の開発環境を最速で整えます。単に動く環境ではなく、最低限必要なツールも一通りそろえていきます。(2025 年秋時点の情報です)
この記事で作る開発環境について
この記事のゴール
-
bun runコマンドで TypeScript ファイルを実行できる -
bun replコマンドで REPL を起動して TypeScript を実行できる -
bun tsc --noEmitコマンドで（厳しい）型チェックができる - TypeScript Language Server でコード補完と型チェックができる
-
bun biomeコマンドでフォーマットとリントができる - Biome の拡張機能でリントが開発中にも実行される
- Biome の拡張機能でフォーマットと自動修正が保存時に自動で実行される
-
bun testコマンドでテストコードを実行できる - Bun の拡張機能でテストをソースコードから実行できる
- Bun の拡張機能でテストをデバッグモードで実行できる
こんな人におすすめ
- とりあえず TypeScript を快適にコーディングできて動かせる環境が欲しい！
こんな人にはあまりおすすめしない
-
OS？ターミナル？ディレクトリ？概念がまったくわからない～
-> よーく調べて理解しながら進めてください。事故が起きても自己責任です。
-
英語がまったく読めない～
-> インストールするツールの公式サイトが英語です。翻訳ツールを使ったり日本語の記事を参考にしたりして頑張ってください。
-
Node.js がいい！ Deno がいい！ ESLint がいい！
-> 入れるツールや手順がちょっと違います。一部は参考になるかもしれませんが、それ用の記事を探した方がいいかもしれません。
-
Next.js とか Hono とか、特定のフレームワークを使ってみたい！
-> 各フレームワークの公式のクイックスタートをお勧めします。この記事も部分的には参考になるかもしれません。
-
ビルドしてデプロイまでできるようにしてほしい！
-> ちょっとこの記事には荷が重いです。途中までなら参考になるかもしれません。
なぜ Bun? なぜ Biome?
Bun
Bun は JavaScript 実行環境・パッケージマネージャ・TypeScript 実行環境・バンドラー・テストランナーのオールインワンツールです。
- Node.js + pnpm + tsx + vite + vitest のような、個別のパッケージを集めた構成よりも初期構築コストが下がります。
- Bun のパッケージの管理方法やビルトイン API は Node.js 互換なので、 Deno に比べてインターネット上の資産が多く簡単に使えます。
- プロジェクトの安定性に不安があるといわれているようですが、手元でサクッと試すだけなら十分です。
Biome
Biome は高速オールインワンのフォーマッター・リンターです。
- Bun にフォーマッターやリンターの機能はありません。さすがにつらいので入れます。
- 従来の ESLint + Prettier をこれ 1 つで置き換えられます。
- ESLint に比べるとカスタマイズ性は劣りますが、なにより設定が簡単です。
1. VS Code をインストール
VS Code がインストールされていない場合、公式サイトから VS Code をインストールしてください。
Cursor など VS Code フォークのエディタがインストールされていればそれを使っても構いません。
日本語化はお好みで。
2. Bun をインストール
Bun を公式サイトに従ってインストールします。
3. プロジェクトを作成
お好みの名前の空ディレクトリ (フォルダ) を用意します。
慣習として、プロジェクトのディレクトリ名は小文字英数とハイフン (-) のみにすることをお勧めします。
mkdir setup-typescript-2025-autumn
用意したディレクトリを VS Code で開きます。
code setup-typescript-2025-autumn
VS Code 内でターミナルを開きます。
Ctrl + Shift + ` またはウィンドウ上部のツールバーにある Terminal から開けます。
ターミナルが開いたら、bun init を実行して Bun の新規プロジェクトをセットアップします。プロジェクトの種類は Blank を選択してください。
bun init
このコマンドが command not found のエラーで実行できない場合、PATH が通っていない可能性があります。公式ドキュメントに従って PATH の設定を試してみてください。
4. TypeScript の設定
bun init で生成される tsconfig.json の型チェック設定は少し緩いので、厳しくしておきましょう。以下のコマンドを実行して、tsconfig/bases の共有プリセットを開発依存にインストールします。
bun add -D @tsconfig/bun @tsconfig/strictest
tsconfig.json を以下の内容に置き換えます。
{
"extends": ["@tsconfig/bun", "@tsconfig/strictest"],
"exclude": ["node_modules", "out", "dist"]
}
設定の優先順位は bun < strictest です (後勝ち)。
5. Biome の導入
以下のコマンドを実行し、Biome を開発依存にインストールします。
bun add -D @biomejs/biome
bun biome init コマンドで推奨の設定ファイルを作成します。
bun biome init
作成された設定ファイル biome.json を修正します。
フォーマット対象外のファイルを指定しつつ、癖のある設定があるのでお好みで変更します。
{
"files": {
- "ignoreUnknown": false
+ "ignoreUnknown": false,
+ "includes": ["**", "!**/node_modules", "!**/out", "!**/dist"]
},
"formatter": {
"enabled": true,
- "indentStyle": "tab"
+ "indentStyle": "space",
+ "indentWidth": 4,
+ "lineWidth": 120
},
"javascript": {
"formatter": {
- "quoteStyle": "double"
+ "quoteStyle": "single"
}
},
}
6. VS Code 拡張機能の導入
Biome の拡張機能 を導入して、開発中にリンターのルール違反を検知できるようにします。以下の VS Code マーケットプレイスからインストールできます。
インストールできたら、さらにファイル保存時に Biome を使って自動フォーマットするように設定します。
今回はプロジェクト配下に .vscode/settings.json を作成しましょう。
{
"editor.formatOnSave": true,
"[json]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[javascriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
},
"editor.codeActionsOnSave": {
"source.fixAll.biome": "explicit",
"source.organizeImports.biome": "explicit"
}
}
これで、.ts ファイルなどを編集して Ctrl + S で保存すると自動でフォーマットされるようになります。
VS Code の自動保存設定をオンにしている場合、自動保存ではフォーマットされないので注意してください。
さらに Bun の拡張機能 も導入して、テストコードが簡単に実行できるようにしましょう。以下の VS Code マーケットプレイスからインストールできます。
インストールできたら、さらにテストコードをデバッグ実行できるように設定します。Bun 拡張機能のページの指示に従って、プロジェクト配下に .vscode/launch.json を作成しましょう。
{
"version": "0.2.0",
"configurations": [
{
"type": "bun",
"request": "launch",
"name": "Debug Bun",
// The path to a JavaScript or TypeScript file to run.
"program": "${file}",
// The arguments to pass to the program, if any.
"args": [],
// The working directory of the program.
"cwd": "${workspaceFolder}",
// The environment variables to pass to the program.
"env": {},
// If the environment variables should not be inherited from the parent process.
"strictEnv": false,
// If the program should be run in watch mode.
// This is equivalent to passing `--watch` to the `bun` executable.
// You can also set this to "hot" to enable hot reloading using `--hot`.
"watchMode": false,
// If the debugger should stop on the first line of the program.
"stopOnEntry": false,
// If the debugger should be disabled. (for example, breakpoints will not be hit)
"noDebug": false,
// The path to the `bun` executable, defaults to your `PATH` environment variable.
"runtime": "bun",
// The arguments to pass to the `bun` executable, if any.
// Unlike `args`, these are passed to the executable itself, not the program.
"runtimeArgs": [],
},
{
"type": "bun",
"request": "attach",
"name": "Attach to Bun",
// The URL of the WebSocket inspector to attach to.
// This value can be retrieved by using `bun --inspect`.
"url": "ws://localhost:6499/",
// Optional path mapping for remote debugging
"localRoot": "${workspaceFolder}",
"remoteRoot": "/app",
},
],
}
7. 動作確認
これで構築の手順は完了です。目標が達成できたかどうか確認してみましょう。
bun run コマンドで TypeScript ファイルを実行できる
プロジェクト直下に index.ts を作成しましょう。bun init で既に作成されていると思います。
console.log('Hello via Bun!');
この TypeScript ファイルを bun run index.ts で実行してみます。
bun run index.ts
標準出力に Hello via Bun! と表示されれば目標達成です！
Hello via Bun!
bun repl コマンドで REPL を起動して TypeScript を実行できる
bun repl コマンドで REPL を起動します。
REPL はターミナルにソースコードを直接書いて実行することができる機能です。
Bun の REPL はまだ試験的機能のようですが、十分使えると思います。
bun repl
REPL が起動したら、プロンプトに TypeScript のコードを入力して実行してみます。ソースコードを入力して Enter キーで実行です。
const msg: string = 'REPL OK';
// > undefined
msg.toLowerCase();
// > repl ok
型アノテーションがついた TypeScript コードを REPL で実行できれば目標達成です！
REPL を終了するにはプロンプトに .exit を入力するかキーボードで Ctrl + D を入力します。
bun tsc --noEmit コマンドで（厳しい）型チェックができる
index.ts を編集して、以下の行を追加します。
// 未使用変数エラーを発生させる
const unused = 123;
この状態で bun tsc コマンドを実行してみましょう。
bun tsc --noEmit
@tsconfig/strictest の設定によって以下のエラーが表示されれば目標達成です！
index.ts:1:7 - error TS6133: 'unused' is declared but its value is never read.
TypeScript Language Server でコード補完と型チェックができる
index.ts を開いて、TypeScript Language Server のコード補完機能と型チェック機能を体験しましょう。
console.log('console.l と入力した時点で log が候補に出てきます。');
const value: number = '数値に文字列を代入しているので、型チェックのエラーが表示されます。';
コード補完と型チェックの動作が確認できれば目標達成です！
bun biome コマンドでフォーマットとリントができる
index.ts を開いて、わざとフォーマット崩れとルール違反のあるコードを作成します。Ctrl + S で保存すると自動でフォーマットされてしまうので、Ctrl + K, Ctrl + Shift + S で保存します。
const fixMe:String= 'fix me!'
// スペースの数がおかしい、セミコロンがない、不適切な型、未使用変数
bun biome check を実行して、フォーマットとリントルールのチェックを実行します。
bun biome check
フォーマット差分とリントルール違反の指摘が表示されれば OK です。
(このコマンドでは自動フォーマットや自動修正はされません)
! This variable fixMe is unused.
> 1 │ const fixMe:String= 'fix me!'
│ ^^^
! Don't use 'String' as a type.
> 1 │ const fixMe:String= 'fix me!'
│ ^^^^^^
× Formatter would have printed the following content:
1 │ - const··fixMe:String=·'fix·me!'
1 │ + const·fixMe:·String·=·'fix·me!';
2 │ +
bun biome format --write を実行して自動フォーマットも試しましょう。
bun biome format --write
ファイルが整形されることが確認できれば OK です。
(このコマンドではルール違反は自動修正されません)
bun biome lint --write を実行してルール違反の自動修正も試しましょう。
bun biome lint --write
String が string に修正されることが確認できれば OK です。
(このコマンドでは未使用変数の問題は自動修正されません)
これでフォーマットとリントをコマンドで実行する目標は達成です！
Biome の拡張機能でリントが開発中にも実行される
index.ts を開いて、先ほど同じわざとフォーマットを崩したルール違反のコードを作成します。
const fixMe:String= 'fix me!'
// スペースの数がおかしい、セミコロンがない、不適切な型、未使用変数
この状態で fixMe や String の部分にホバーしてみてください。
先ほどと同じルール違反のエラーがコマンドなしでも表示されることを確認できれば目標達成です！
Biome の拡張機能でフォーマットと自動修正が保存時に自動で実行される
index.ts を開いて、先ほど同じわざとフォーマットを崩したルール違反のコードを作成します。
const fixMe:String= 'fix me!'
// スペースの数がおかしい、セミコロンがない、不適切な型、未使用変数
この状態で Ctrl + S で保存してみましょう。
以下のように自動修正されれば目標達成です！
const fixMe: string = 'fix me!';
bun test コマンドでテストコードを実行できる
テストファイルを 1 つ追加して、テストランナーが動くか確認します。
index.test.ts をプロジェクト直下に作成し、以下のテストコードを追加しましょう。
import { describe, expect, it } from 'bun:test';
describe('math', () => {
it('adds numbers', () => {
const result = 1 + 2;
expect(result).toBe(3);
});
});
bun test コマンドでテストを実行します。
bun test
テストが実行できて、以下のような結果が表示されれば目標達成です！
index.test.ts:
✓ math > adds numbers
1 pass
0 fail
1 expect() calls
Ran 1 test across 1 file. [37.00ms]
Bun の拡張機能でテストをソースコードから実行できる
続いてソースコードから直接テストを実行できるか確認します。
index.test.ts を開くと、describe('math' から始まる行の左に再生ボタンが表示されているでしょうか。これをクリックしてみましょう。
画面下部のペインが TEST RESULTS に切り替わり、 先ほどと同じテスト結果が表示されれば目標達成です！
index.test.ts:
✓ math > adds numbers
1 pass
0 fail
1 expect() calls
Ran 1 test across 1 file. [37.00ms]
Bun の拡張機能でテストをデバッグモードで実行できる
続いて VS Code 上でブレークポイントを使ってテストをデバッグできるかを確認します。
index.test.ts を開き、expect(result).toBe(3); の行の行番号の左側をクリックしてブレークポイントを置きます。赤い丸が表示されれば OK です。
この状態で、describe('math' から始まる行の左にあるボタン（先ほどは再生ボタンでしたが、一度テストが成功したので成功マークになっていると思います）を 右クリックして、Debug Test を選択します。
するとテスト実行されますが、ブレークポイントで一時停止します。
左側のペインがデバッグペインに切り替わり、VARUABLES > Locals に変数 result の中身が表示されていれば目標達成です！
result = 3
一時停止したテストを再開するには、画面上に表示されるデバッグコントローラーの再開ボタンを押します。
そして、お疲れ様でした！これで最高の TypeScript + Bun + Biome 開発環境が完成しました！
おわりに
以上、普段自分が使っている最小構成を紹介しました。多分これが一番早くて便利です。
Bun と Biome のおかげでだいぶセットアップが簡単になった気がします。サクッとコードを書くなら現状は Bun が一番楽ですね。
あとは package.json > scripts に好きなコマンドを定義するもよし、git init で Git リポジトリとして設定するもよし、type-fest や remeda のようなユーティリティライブラリを追加するもよしです。リンターやテストツールが整っているので、Coding Agent と一緒に Vibe Coding を始めることだってできます！
では、よき開発環境でよき開発体験を。Happy Hacking! 🎉
Discussion