vscode에서 편집중인 typescript 파일을 실행하도록 설정하기

tsc --watch를 실행해 두면 매번 변경사항이 발견될 때, 알아서 빌드를 수행한다.

이상태에서 코드를 편집하고 실행을 해도 된다. 하지만 매번 콘솔을 열어 명령어를 쳐 넣는 것도 귀찮다.

그럴 땐 Run 메뉴를 실행할 때 빌드를 하게 해 주자.

.vscode/tasks.json 파일 수정

tsc를 tsc-watch로 변경

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc-watch"],
      "group": "build"
    }
  ]
}

.vscode/launch.json 파일 수정

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${fileDirname}/${fileBasename}",
      "outFiles": ["${workspaceFolder}/**/*.js"],
      "preLaunchTask": "build"
    }
  ]
}

핵심은 preLaunchTask로 빌드를 먼저 수행하게 하는 것이다. 별 것 없다.

 

이제 코드를 편집하고 Run 메뉴를 실행해 보자. Happy! :)