Edited at

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 を使っています。