TypeScript と VS Code
〜 デバッグと自動ビルド 〜
✙
2026-04-14 作成 福島
TOP > tips > typescript-vscode
[ TIPS | TOYS | OTAKU | LINK | MOVIE | CGI | AvTitle | ConfuTerm | HIST | AnSt | Asob | Shell | GBC | LLM ]

0. 前置き

本稿では、TypeScript を VS Code から利用します。

サンプルコードは前述のじゃんけんシステムを題材としています。
動作を確認したい方は、そちらも参照してください。

1. デバッガの用意

1-1. VS Code をインストールする。
VS Code の Web ページから  Windows 10,11  をクリックしインストーラをダウンロード＆インストールする。
今回は VSCodeUserSetup-x64-1.113.0.exe だった。

 ◉同意する(A) を選択して ボタンをクリックする。
 ⇓
 インストールするフォルダを確認して ボタンをクリックする。
 ⇓
  ボタンをクリックする。
 ⇓
 ☑ デスクトップ上にアイコンを作成する(D)
 にチェックを入れて ボタンをクリックする。
 ⇓
  ボタンをクリックする。
 ⇓
 待つ。
 ⇓
 ☐ Visual Studio Code を実行する
 のチェックを外して ボタンをクリックする。
1-2. VS Code に拡張機能をインストールする。
• 上記 1-1 でインストールした VS Code を起動し、拡張機能をインストールする。
 ← ダブルクリックで起動する


メニューが英語のままなら、以下の操作を実施する。
VS Code: メニュー > View > Command Palette... Ctrl+Shift+P
 ← 入力する。
→ 日本語 (ja) 選択する。
 →  ボタンが表示されるのでこれをクリックする。
• 拡張機能を 3 つインストールする。
VS Code: メニュー > 表示 > 拡張機能 (Ctrl+Shift+X)

検索: WSL → 
検索: Error Lens → 
検索: Prettier Code formatter → 
1-3. コードフォーマットを Prettier Code formatter にする。
VS Code: メニュー > ファイル > ユーザー設定 > 設定 (Ctrl+,)
検索: default formatter
Editor: Default Formatter
選択 → 
 
検索: format on save
Editor: Format On Save  
チェックを入れる → ☑
項目を入力したら  ×  をクリックして設定ウィンドウを閉じる。

2. WSL2 から VS Code を呼び出す。

2-1. Ubuntu から VS Code を呼び出す。
ターミナルが開いている場合は、すべて閉じてから開き直す。

− □ × 
 >_ Windows PowerShell ×   + | ∨
 
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows  

PS C:\> # WSL2 の Ubuntu に入る
PS C:\> wsl ~ ⏎

who@pc:~$ # プロジェクトディレクトリへ移動する
who@pc:~$ cd ./ts/janken/ ⏎

who@pc:~$ # tsx をインストールする (tsx: .ts を直接実行する疑似インタプリタ*1)
who@pc:~/ts/janken/$ npm install tsx --save-dev ⏎

who@pc:~$ # VS Code とのインタフェースを開く (VS Code が自動的に起動する)
who@pc:~/ts/janken/$ code . ⏎
Installing VS Code Server for Linux x64 (cfbea10c5ffb233ea9177d34726e6056e89913dc)
Downloading: 100%
Unpacking: 100%
Unpacked 3690 files and folders to /home/who/.vscode-server/bin/cfbea10…26e6056e89913dc.
Looking for compatibility check script at /home/who/.vscode-server/bin/…-requirements.sh
cfbea10c5ffb233ea9177d34726e6056e89913dc
Running compatibility check script
Compatibility check successful (0)


ここで下記 2-2 のウィンドウが開く


以降は VS Code での作業になるため、このターミナルウィンドウは閉じても構わない

who@pc:~/ts/janken/$ exit ⏎
logout
PS C:\> exit ⏎
*1実際は Node.js が .ts を読み込もうとしたタイミングで tsx が介在し .ts → .js の変換結果を Node.js に返す動作なのでインタプリタではない。そのように見えるだけ。

「npm install ～」が完了しているなら、次からは 1 行で VS Code の起動までできる。
− □ × 
 >_ Windows PowerShell ×   + | ∨
 
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows  

PS C:\> # プロジェクトディレクトリを指定して VS Code を起動する
PS C:\> wsl --cd ~ -e bash -c "code ~/ts/janken" ⏎
PS C:\> exit ⏎
2-2. VS Code を確認する。
 ☑ 親フォルダー '…' 内のすべてのファイルの作成者を信頼します
 にチェックを入れ、 ボタンをクリックする。

 ⇓
VS Code から WSL2 のソースコードを編集できるようになる。


3. サーバの起動と自動的な再起動

ソースファイルを保存すると、そのタイミングで自動的にトランスコンパイルする管理の仕組みがある。
ここではその仕組みを導入する。
コマンド意味
npx tsx watch ～.ts～.ts ファイルをサーバとして実行し、
更新されたら*2自動的にトランスコンパイル → サーバの再起動を実行する。
npx tsc -b --watchプロジェクト全体のファイルを監視し、どれかが更新されたら*2再ビルドする。
*2ファイル更新を監視しているので、画面で編集しただけでは発動しない。
この管理方法だと、tsx と tsc が同時に動くこともあるが、多くの場合は問題にしない。(「ならない」ではなく)
一般的に tsc に比較して tsx の速度負荷はせいぜい 10% らしい。
tsx の速度が 45 倍のこともある (45 倍 ≒ 2.22%)

3-1. ターミナルを 2 つ開く。
• JavaScript デバッグターミナルを開く。

実行とデバッグ (Ctrl+Shift+D) アイコン >  JavaScript デバッグターミナル 
を選択すると、ウィンドウの下半分に 1 つ目のターミナルペインが開く。(デバッグ用)

[ターミナル1]



• 2 つ目のターミナルを開く。

デバッグターミナルの上方にある「分割アイコン」をクリックすると
フィールドが分割されて 2 つ目のターミナルペインが開く。(通常用)

[ターミナル2]


3-2. じゃんけんサーバを起動する。
「ターミナル1] でじゃんけんサーバを起動する。
 → 自動的にブラウザが起動する。(Windows のデフォルトブラウザ)

JavaScript デバッグターミナル
who@pc:~/ts/janken$ npx tsx watch ./src/player.ts

Debugger attached.
Debugger attached.
Debugger attached.
--------------------------------------------------
Janken Server (Express) started on 0.0.0.0:8080
Environment MY_NAME: unknown
--------------------------------------------------
 ⇒ 

この状態で VS Code から ./src/player.ts をファイル更新すると、
tsx が自動的に再起動し、連動してデフォルトブラウザも再起動される。

ソースコードデバッグも可能。
ブレークポイントでプログラムを停止できる。
通常のターミナルではソースコードデバッグができない。必ず  JavaScript デバッグターミナル  で作業すること。
3-3. プロジェクトを監視する。
「ターミナル2] でプロジェクトを監視する。

通常のターミナル
who@pc:~/ts/janken$ npx tsc -b --watch            

[10:01:56 PM] Starting compilation in watch mode...

[10:02:03 PM] Found 0 errors. Watching for file changes.


 ← ./src/client.ts の更新を感知して
   自動的にビルドが実行されたメッセージ。


この状態で VS Code から ./src/player.ts や ./src/client.ts をファイル更新すると、
プロジェクト全体がビルドされる。

デフォルトブラウザは再起動されないため、ブラウザのリロードボタンをクリックする必要がある。