VSCodeでNodeJS + Typescriptのソースコードを監視しながらデバッグする

Dart
この記事は約3分で読めます。

概要

ここで、記載するのは、でNodeとTypeScriptをつかったサーバーサイド開発で、ソースコードを監視しながら、VSCodeデバッグを行う方法です。

いろいろ探したけど、起動後にアタッチする方法が多くてわかりにくかった。やりたいのは、VSCodeのデバッグを一回の動作で行いたかった（簡単にデバッグしたかった）のと、用途がAPIモックなので、できるだけ記載を少なくしたかった。

環境

  • Windows 11
  • Ubuntu 22.04 (WSL)
    • NodeJS v18.12.1
    • npm 8.19.2

内容

Windows環境を汚すのが嫌だったので、WSL上のUbuntuで構築しています。たぶん、Windows上でも動きます。

最終的には、このようになります。

|--.vscode
|  |--launch.json
|--package-lock.json
|--package.json
|--index.ts
|--tsconfig.json

作成方法

まずは、プロジェクトフォルダを作ってコマンドを実行します。

npm init -y
npm install --save-dev typescript @types/node ts-node ts-node-dev
npx tsc --init --sourceMap true

.vscode/launch.json

{
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "プログラム起動",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/tsnd",
            "program": "${file}",
            "args": [
                "--transpile-only",
                "--respawn",
                "--project",
                "tsconfig.json"
            ],            
            "skipFiles": [
                "<node_internals>/**"
            ],
        }
    ]
}

index.ts

import * as http from "http";

const port = 3000;
const server = http.createServer(
  (request, response) => {
    response.end("Hello! Node.js with TypeScript");
  }
);
server.listen(port);

あとは、VSCodeのデバッグを実行する。

コメント