Visual Studio Codeとts-nodeでシンプルなTypeScriptデバッグ環境を作る

はじめに

VSCodeでTypeScriptをデバッグしたい時、割と環境構築が面倒だったりしませんか？ts-nodeを使えば簡単にデバッグできるようになるので、今回はそのやり方をご紹介します。

手順

※プロジェクトディレクトリは作成済みとします
①npmを初期化

npm init

②TypeScriptをインストール

npm install typescript @types/node@14

※「14」の部分はお使いのNode.jsのバージョンに合わせてください

③ts-nodeをインストール

npm install ts-node

④launch.jsonにエントリポイントを追加

launch.json

"args": [
    "${workspaceFolder}/src/index.ts"
]

⑤launch.jsonに下記設定を追加

launch.json

"runtimeArgs": [
    "-r",
    "ts-node/register"
]

launch.json全体ではこんな感じです

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "runtimeArgs": [
                "-r",
                "ts-node/register"
            ],
            "skipFiles": [
                "<node_internals>/**"
            ],
            "args": [
                "${workspaceFolder}/src/index.ts"
            ]
        }
    ]
}

以上で設定は完了です。シンプルでしょ？

動作確認

プロジェクトディレクトリ直下にsrcディレクトリを作成し、下記のファイルを配置します

index.ts

import {testClass} from "./test";

const test = new testClass();
test.testFunction();

test.ts

export class testClass {
    testFunction() {
        console.log("testFunction has called");
    }
}

エントリポイントであるindex.tsでtestFunctionを呼び出すだけですね

最後に、好きな箇所にブレークポイントをセットしてデバッグ画面で先程作成したlaunch.jsonを選択し、実行ボタンをクリックします

まずtestFunctionの呼び出し元がヒットし

次にtestFunctionの内部がヒットすることを確認できました

今回は以上です。