Vscode+Type Script F5 키를 누르면 자동 라우팅

Vscode+Type Script F5 키를 누르면 자동 라우팅
전제 조건
vscode에서 F5 키를 눌러 Type Script 디버깅 수행 가능한 상태

tsc를 통해 ts 파일을 전송하여 js 파일을 출력할 수 있음

전송 시 js.ts 파일의 디버깅을 실행할 수 있는 출력 맵

할 일
vscode로 F5 키(디버깅)를 누르면 자동으로 전송하려고 합니다
= "지령선 연결 후 디버깅"귀찮아 어떻게든 해결
하지 않는 일

tsconfig.json 사용자 정의

packages.json 사용자 정의

1. 단계
1-1. tasks.json 만들기
명령 트레이(shift+ctrl+p)를 열고 작업 구성을 선택합니다.

템플릿에서 tasks.json 생성 을 선택합니다.

Others 선택

프로젝트 폴더 아래에 있습니다.vscode/tasks.제이슨 제작을 확인했습니다.
1-2. tasks.json 편집

commond에서 tsc의 경로를 지정

lavel 알기 쉬운 이름으로 변경(여기는 typescriptbuild)

tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "typescript_build",
            "type": "shell",
            "command": "node_modules/.bin/tsc"
        }
    ]
}

1-3. launch.json 만들기
실행 및 디버깅을 엽니다. "launch.json 파일을 만듭니다."누르다

환경 선택에서 노드.js 선택

.vscode/launch.json 파일이 생성되었는지 확인
1-4. launch.변경 json
launch.json에 preLaunchTask를 추가합니다.수치는tasks입니다.lavel에 json으로 기재된 내용을 기록합니다.
launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": ["<node_internals>/**"],
            "program": "${file}",
            "outFiles": ["${workspaceFolder}/**/*.js"],   //末尾にカンマ追加
            "preLaunchTask": "typescript_build"    //追加
        }
    ]
}

1-5. 디버그 실행
ts 파일을 열고 폭발 지점을 설정한 후 F5 키를 누르면 디버깅 실행을 시작합니다
js、js.맵 파일을 만든 후 디버깅이 시작되었는지 확인하십시오