VSCodeでTypeScriptをデバッグする環境をつくってみた

環境作った足跡メモです。
色々と雑でごめんなさい。

やりたいこと

• 目的：VSCodeでTypeScriptをデバッグしたい
• 要件
  1. ブレークポイントを設定してデバッグしたいのはTypeScript（生成されたJSではない）
  2. 開いているtsファイルをデバッグ対象にしたい（index.tsなどに固定しない）
  3. 生成した js ファイルは ./build/js/ に生成する

TypeScriptが動く環境にする

流れは、以下

1. nodeが動く状態を確認（入ってなければ導入）
2. npmで拡張できる状態
3. npmでTypeScriptを入れる

nodeが動く状態を確認

$ node -v
v11.13.0

入ってなければいれる。
macだったらbrewあたり。
自分はnodebrew入れたりしてます。

npm確認

$ npm -v
6.9.0

TypeScript導入

$ npm install -g -y typescript

-g そのマシンの共通として入れるオプション
-y だまってイエッサー

typescriptパッケージが入ったことの確認（npmから）

$ npm info typescript version
3.6.4

TypeScriptのtscコマンドが入ったことの確認

$ tsc -v
Version 3.6.4

VSCodeの環境づくり開始

TypeScriptが入ったら環境をつくる

$ tsc --init

を実行して tsconfig.jsonというコンパイル定義ファイルを生成しておく。
後に、実行時のコンパイルで呼ばれます

動作の流れ

1. launch.json に今回のデバッグ「Launch TypeScript」を定義する
2. 実行前のコンパイルが必要なので、デバッグ定義ファイル（launch.json）の事前処理(preLaunchTask)にコンパイルタスク「Compile TypeScript」を指定する
3. コンパイルタスク「Compile TypeScript」をタスク定義ファイル(tasks.json)に定義する

launch.json

vscodeにて生成されるlaunch.jsonにLaunch TypeScriptを定義する

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch JavaScript @index.js",
            "program": "${workspaceFolder}\\index.js",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
       **ここに追加***
    ]
}

以下を上記のところに追加する

        ,
        {
            "type": "node",
            "request": "launch",
            "name": "Launch TypeScript",
            "preLaunchTask": "Compile TypeScript",
            "cwd": "${workspaceFolder}",
            "program": "${file}",
            "outFiles": [
                "${workspaceFolder}/build/**/*.js"
            ]
            
        }

• name: タスク名
• preLaunchTask: 次のtasks.jsonのlabelと併せます
• cwd: 実行する場所
• program: 実行対象ファイル（今回は開いているtsになる）
• outFiles: コンパイル済みのjsファイルを示す（ToDo:詳細はもうちょっと調べる）

元の定義の後ろに「,」を忘れずに

tasks.json

tasks.jsonにCompile TypeScriptを定義する

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "Compile TypeScript",
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "problemMatcher": [
            "$tsc"
        ],
      }
    ]
}

• label: launch.jsonのpreLaunchTaskと併せます
• type: "typescript"
• tsconfig: さきほど"tsc --init" で生成したやつです
• problemMatcher:（ToDo:詳細はもうちょっと調べる）

tsconfig.json

コンパイルオプションの定義

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs",
    "jsx": "preserve",
    "outDir": "./build/js/", 
    "strict": true,  
    "sourceMap": true,
}

• target: どのバージョンとしてコンパイルするか
• outDir: jsファイルの生成先
• sourceMap: 関連付けファイルの生成(.mapファイル)

デバッグ

• test.tsというファイルを作ってみる

let message1 : string = "hello1";
console.log(message1);
let message2 : string = "hello2";
console.log(message2);

• console.logの2箇所にブレークポイントを設定。
• VSCodeから対象ファイル ${file} （今回は test.ts）を開いている状態で「Launch TypeScript」を押してデバッグ開始

ちゃんとブレークポイントで止まりました。
画像は２つのブレークポイントまで進めたところ