VSCode에서 타입스크립트 디버깅하기

.vscode 폴더 (는 알아서 생성하거나 자동으로 생성시키자.)

타입스크립트는 node.js와 다르게 tasks.json을 생성해야 한다.

 주) task runner를 이용해서 만들라는데 기본 vs코드에는 없다. 확장인가보다. 확장에서 찾아보니 동명으로 되어 있는게 있는데 설치해도 안나온다. 그래서 수동으로 작성했다. 

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "presentation": {
        "echo": true,
        "reveal": "never",
        "focus": true,
        "panel": "shared",
        "showReuseMessage": true,
        "clear": false
      },
      "problemMatcher": [
        "$tsc"
      ],
      "label": "tsc: build - tsconfig.json",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

여기서 중요한 것은 lable이다. 아마 자동생성시키면 build가 빌드로 될건데 아래 launch.json의 preLaunchTask와 맞추면 된다. 

{
  // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
  // 기존 특성에 대한 설명을 보려면 가리킵니다.
  // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
  "version": "2.0.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "프로그램 시작",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/src/server.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "protocol": "inspector",
      "outputCapture": "std",
      "outFiles": [
        "${workspaceFolder}/build/**/*.js"
      ]
    }
  ]
}

여기서 중요한 것은 outputCapture이다. (기본생성 시 왜 이것은 빠지는지 모르겠다.)

디버그 콘솔에 logger(winston이든 logjs든 확장패키지)에서 transport로 console로 내보낸 로그를 찍도록 하는 옵션이다.

위에 보면 알겠지만 실행해보면 build폴더에 타입스크립트 소스를 js로 변환해서 실제 node *.js로 실행된다.