Setup the VSCode debugger for a NodeJS + Typescript project

5 min readJun 8, 2023

In this article we’ll have a look at how to create a launch.json to setup our debugger. After, we’ll have a look at how to create a tasks.json file to automate the building process of your project so you won’t have to “tsc” every time you change your source code! At the end I’ll talk about an issue a about the Tasks.json not completing the build.

Create the project

Open an empty folder inside your vs code

Open the terminal inside your folder and initialize the package.json

npm init -y

After running this command you should have a package.json inside your working folder.

For this project install typescript as a dev dependency

npm install typescript --save-dev

After installing typescript dependency, run the following command:

npx tsc --init

this will add a tsconfig.json file to your project.

Add some basic configuration for the project:

Remember to set sourceMap:true

{
  "compilerOptions": {
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    "outDir": "./build",                                   /* Specify an output folder for all emitted files. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true ,                              /* Skip type checking all .d.ts files. */
  }
}

Create a src folder in your project directory. This folder will contain your TypeScript source files.

Create a sample TypeScript file inside the src folder. For example, create a file named index.ts.

The launch.json file

Create the launch.json file: click on the debugger icon and click on “create a lanuch.json file”

Then, select Node.js

You should end up with something like this:

You’ll need to edit this file:

Change "program":"${file}"

use the outDir of your tsconfig.json file to set the program value (in my case it’s “./build” ):

${workspaceFolder} is the path of the folder opened in VS Code

you should end up with something like this:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/build/index.js"
        }
    ]
}

I ran into some issues using the src/index.ts as the “program” value. Everything runs smoothly using the output file!

Build the Typescript

At this point you should have this inside your working directory:

now from the terminal run the command

npx tsc

After running the command you should have this:

tsc built your project!

Now, you can finally use the source maps generated (index.js.map) to debug your code:

inside your index.ts file add a breakpoint (i just used a console.log)

Now open your debugger:

Click on the green Play button (“Launch Program” is the name we gave inside the launch.json file we created )

Everything works perfectly!!

Let’s try with adding a module:

Create another file next to your index.ts file:

I’ll create a “Dog.ts” file with a very simple class, Dog:

export class Dog {
    bark(){
        console.log("woooof!");
    }
}

Now I’ll import Dog inside the index.ts file:

Let’s try and debug this code now, add a break point inside of bark and try and run the code:

But wait, remember to re run the command

npx tsc

to generate the new source maps.

Everything should work smoothly…

But manually running the compiler every time can become cumbersome. Let’s make vscode do it for us with a Task.

Tasks.json

Tasks in VS Code can be configured to run scripts and start processes so that many of these existing tools can be used from within VS Code without having to enter a command line or write new code.

Press

ctrl + shift + P

Look for this: