Skip to content

Instantly share code, notes, and snippets.

@ThorsAngerVaNeT
Forked from ehaynes99/vscode-debug-current.md
Created September 28, 2023 12:30
Show Gist options
  • Save ThorsAngerVaNeT/cba280118a12a7561aba4d199246d208 to your computer and use it in GitHub Desktop.
Save ThorsAngerVaNeT/cba280118a12a7561aba4d199246d208 to your computer and use it in GitHub Desktop.
VSCode debugging current typescript file

Debugging TypeScript in VSCode

These launch configs will allow you to debug typescript files directly from VSCode. It will honor the tsconfig and resolve node modules properly. You do not need to install ts-node or nodemon, as everything is run using npx.

Launch Config

{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "ts-node current file",
      "runtimeExecutable": "npx",
      "runtimeArgs": ["-y", "ts-node"],
      "program": "${file}",
      "cwd": "${fileDirname}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "watch current file",
      "runtimeExecutable": "npx",
      "runtimeArgs": [
        "-y",
        "nodemon",
        "-q",
        "--exec",
        "$(echo npx -y ts-node ${file})"
      ],
      "program": "${file}",
      "cwd": "${fileDirname}",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
  ],
}

Explanation

The first one is pretty straightforward. If the file is src/one/two/three.ts, this is the equivalent of:

cd src/one/two
npx -y ts-node three.ts

It's better to use cwd in this way, as this allows for nested tsconfig files as may appear in a monorepo.

The second one had to be a bit sneaky. nodemon has TypeScript support, but

The runtimeExecutable is npx, which allows running modules directly from npm.

Debug current file

This launch config will run the current typescript file in the debugger. This does not require ts-node to be installed, as it runs through npx.

{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "ts-node current file",
      "runtimeExecutable": "npx",
      "runtimeArgs": ["-y", "ts-node"],
      "program": "${file}",
      "cwd": "${fileDirname}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
    },
  ],
}

Live Reloads

If you want live reloading, you can use the combination of nodemon and ts-node. Unfortunately, I havent found a way to do this without installing ts-node (see below). As in all cases, I strongly recommend adding it as a devDependency in your project rather than installing globally.

npm i -D ts-node

Then you can use this configuration:

{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "watch current file",
      "runtimeExecutable": "npx",
      "runtimeArgs": ["-y", "nodemon", "-q"],
      "program": "${file}",
      "cwd": "${fileDirname}",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
  ],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment