LoginSignup
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-04-09

ベタにかいた場合はうまく動くけど、
フォルダを分けたり、ファイルを分割して 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 を使っています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5