VScode로 TypeScript 디버깅

개요

VScode의 디버그 화면

설정 방법

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debugging TypeScript",
      "program": "${file}", 
      // tasks.json のlabelで指定
      "preLaunchTask": "Compile TypeScript", 
      "cwd": "${workspaceFolder}", 
      "outFiles": [
        "${workspaceFolder}/build/**/*.js"
      ]
    }
  ]
}
// ${file}: 今開いているコード
// ${workspaceFolder} : VS Codeを開いたフォルダ

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Compile TypeScript",
      "type": "shell",
      "command": "yarn build",
      "problemMatcher": []
    }
  ]
}

디버그 실행

참고 자료