vscode+TypeScript F5キー押して実行する際、自動的にトランスパイルを行う

前提

vscodeでF5キー押してTypeScriptデバッグ実行 できる状態であること

• tscでtsファイルをトランスパイルして、jsファイルを出力できること
• トランスパイル時、js.mapを出力してtsファイルのデバッグ実行ができること

すること

vscodeでF5キーを押して（デバッグ）実行を行う際に、自動的にトランスパイルを行いたい
＝「コマンドラインでトランスパイルした後にデバッグ実行を行う」のは面倒なので、なんとかしたい

しないこと

• tsconfig.jsonカスタマイズ
• packages.jsonカスタマイズ

1. 手順

1-1. tasks.json作成

コマンドパレット (shift+ctrl+p) を開き、「タスクの構成」を選ぶ

「テンプレートからtasks.jsonを生成」を選ぶ

「Others」を選ぶ

プロジェクトのフォルダ以下に、.vscode/tasks.json が作成されたことを確認

1-2. tasks.json編集

• commandにtscのパスを指定
• lavelに分かり易い名前 (ここではtypescript_build) に変更

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ファイルを作成します。」を押す

「環境の選択」で、Node.jsを選ぶ

.vscode/launch.jsonファイルが作成されたことを確認

1-4. launch.json変更

launch.jsonにpreLaunchTaskを追加。値には、tasks.jsonでlavelに記載したものを記載。

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.mapファイルが作成された後、デバッグ実行が開始されることを確認