vscodeでtypescriptで構築したアプリのデバックを快適にしよう

Visual Studio Code (VSCode) を使用してTypeScriptで構築されたアプリケーションのデバッグプロセスを、 コード変更時の自動再ビルドと再起動を通じて、 より快適にする方法を解説します。 TypeScript開発では、ソースコードの変更後に都度コンパイルを行う必要がありますが、 この作業は手間と時間がかかります。 そこで、VSCodeのtasks.jsonとlaunch.jsonの設定を適切に行うことで、 変更を監視し自動でビルドとデバッグセッションの再起動を行う環境を構築します。

目的

• TypeScriptで開発されたアプリケーションのデバッグプロセスを効率化する。
• コード変更時に自動で再ビルドと再起動を行い、開発者が手動での再起動作業から解放されるようにする。

使用するVSCode機能

• タスクランナー(tasks.json): プロジェクトビルドや外部ツールの実行を自動化するために使用します。ここでは、TypeScriptの自動コンパイル設定を行います。
• デバッグ設定(launch.json): デバッグセッションを管理する設定を行います。ここでは、Nodemonを使用して変更があった場合に自動でアプリケーションを再起動する設定を加えます。

tasks.jsonの設定

tasks.jsonでは、TypeScriptコンパイラ(tsc)を使用してプロジェクトをビルドするタスクを設定します。–watchオプションを使用することで、ソースファイルの変更をリアルタイムで監視し、変更があるたびに自動的にビルドを実行します。

launch.jsonの設定

launch.jsonでは、デバッグセッションの設定を行います。NodemonをruntimeExecutableとして使用することで、ビルド後のファイル(build/index.js)に対する変更を監視し、変更があった場合にNode.jsアプリケーションを自動的に再起動します。また、preLaunchTaskによりデバッグセッション開始前にTypeScriptのビルドタスクを実行し、最新のコードでデバッグが行われるようにします。

各ファイル

task.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "tsc: build - tsconfig.json",
            "type": "shell",
            "command": "tsc",
            "args": ["--watch", "-p", "tsconfig.json"],
            "isBackground": true,
            "problemMatcher": "$tsc-watch",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}