TypeScript
VisualStudioCode

VisualStudioCode + TypeScript でブレークポイントが効かなかった問題(解決)

More than 1 year has passed since last update.

ベタにかいた場合はうまく動くけど、
フォルダを分けたり、ファイルを分割して Source Map を使ったりするとうまく行かない。

環境

  • Visual Studio Code 1.11.1
  • Type Script 2.2.2

やりたいこと

以下のようなフォルダ構成にしたい。
デバッグ時にブレークポイントを設置したい。

-+ .vscode
 |
 + src_hoge
 | + aaa.ts
 | + bbb.ts
 | + tsconfig.json
 |
 + www_hoge
   + main.js
   + main.js.map

答え

launch.json で outFiles を指定すればうまく行きました。

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "sourceMap": true,
        "outFile": "../www_hoge/main.js"
    }
}

task.json

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "./src_hoge/"],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

launch.json

{
    "version": "0.2.0",
    "configurations":
        {
            "type": "node",
            "request": "launch",
            "name": "クライアント",
            "program": "${workspaceRoot}/www_hoge/main.js",
            "sourceMaps": true,
            "outFiles": [ "${workspaceRoot}/www_hoge/**/*.js" ],     <===== ★これ
            "cwd": "${workspaceRoot}/"
        }
    ]
}

補足

Type Script 1.8 以降、コンパイルオプションに outFile が実装されたため、browserify などは未使用。

launch.json の outDir は非推奨となったので outFiles を使っています。