VS Code で TypeScript をデバッグする

2024-01-30

#TypeScript

#VS Code

#pnpm

#環境構築

デバッグの構成

Overview

Windows 環境の VS Code で TypeScript をデバッグできる環境を構築する
個人的な好みで PowerShell と pnpm を使用する

In Short

Terminal window
ni -type dir ts-project | cd
pnpm add -D typescript
ni tsconfig.json -V '{ "compilerOptions": { /* Visit https://aka.ms/tsconfig to read more about this file */ "target": "es2016", "module": "commonjs", "sourceMap": true, "outDir": "./out", "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true } }'
ni -F .vscode/launch.json -V '{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "skipFiles": ["<node_internals>/**"], "program": "${file}", "preLaunchTask": "tsc", "outFiles": ["${workspaceFolder}/**/*.js"] } ] }'
ni -F .vscode/tasks.json -V '{ "version": "2.0.0", "tasks": [ { "type": "typescript", "tsconfig": "tsconfig.json", "problemMatcher": ["$tsc"], "group": { "kind": "build", "isDefault": true }, "label": "tsc" } ] }'

Flow

プロジェクトの作成

プロジェクトディレクトリを作成して移動

Terminal window
ni -type dir ts-project | cd

typescript パッケージを追加

Terminal window
pnpm add -D typescript

tsconfig.jsonを作成

Terminal window
ni tsconfig.json -V '{ "compilerOptions": { /* Visit https://aka.ms/tsconfig to read more about this file */ "target": "es2016", "module": "commonjs", "sourceMap": true, "outDir": "./out", "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true } }'

作成されるファイルをフォーマットしたものは以下
強調部分がデバッグに必要な設定

tsconfig.json
{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */
    "target": "es2016",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./out",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

.vscode/launch.json を作成

Terminal window
ni -F .vscode/launch.json -V '{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "skipFiles": ["<node_internals>/**"], "program": "${file}", "preLaunchTask": "tsc", "outFiles": ["${workspaceFolder}/**/*.js"] } ] }'

作成されるファイルをフォーマットしたものは以下
タスクを呼び出した後、アクティブなファイルを実行する構成

.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${file}",
      "preLaunchTask": "tsc",
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

.vscode/tasks.json を作成

Terminal window
ni -F .vscode/tasks.json -V '{ "version": "2.0.0", "tasks": [ { "type": "typescript", "tsconfig": "tsconfig.json", "problemMatcher": ["$tsc"], "group": { "kind": "build", "isDefault": true }, "label": "tsc" } ] }'

作成されるファイルをフォーマットしたものは以下
TypeScript をコンパイルするタスク

.vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "label": "tsc"
    }
  ]
}

デバッグの確認

VS Code でプロジェクトディレクトリを開く

Terminal window
code .

適当な ts ファイルを追加

Terminal window
ni -F src/index.ts -V 'const message = "Hello world!"; console.log(message);'
src/index.ts
const message = "Hello world!";
console.log(message);

追加した ts ファイルを VS Code 上で開く

VS Code の 実行タブ > デバッグの開始 または F5 キー で、
js ファイルが生成され、デバッグが開始する

start debug

Ref