As developers, we know that a smooth debugging process can save hours of frustration and boost productivity. In this blog post, we’ll walk through the process of setting up the VSCode debugger for a NodeJS project using TypeScript. We’ll cover everything from project initialization to creating a launch.json file for debugging and a tasks.json file to automate the build process.

What We’ll Cover

• Creating a new project
• Setting up TypeScript
• Configuring the debugger
• Automating the build process
• Troubleshooting common issues

Let’s get started!

1. Creating a New Project

First, we need to set up a new project. Don’t worry if you’re not familiar with all the terms — we’ll explain as we go along.

• Open VSCode and create a new folder for your project.
• Open the terminal in VSCode (View > Terminal or Ctrl+` ).
• In the terminal, type the following command and press Enter: npm init -y

This creates a package.json file, which is like a recipe book for your project. It lists all the ingredients (dependencies) your project needs.

2. Setting Up TypeScript

Now, let’s add TypeScript to our project. TypeScript is a language that adds extra features to JavaScript, making it easier to write and maintain large projects.

• In the terminal, type: npm install typescript - save-dev

This installs TypeScript as a development tool for your project.

• Now, let’s create a TypeScript configuration file. In the terminal, type: npx tsc - init

This creates a tsconfig.json file, which tells TypeScript how to behave in your project.

• Open the tsconfig.json file and replace its contents with:

{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"sourceMap": true,
"outDir": "./build",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}

Don’t worry about understanding every option right now. The important ones are:

• “sourceMap”: true: This creates map files that help with debugging.
• “outDir”: “./build”: This tells TypeScript where to put the compiled JavaScript files.
• Create a new folder called src in your project. This is where we’ll put our TypeScript files.
• In the src folder, create a file called index.ts and add this simple code: console.log("Hello, TypeScript!");

3. Configuring the Debugger

Now, let’s set up the debugger in VSCode:

Click on the “Run and Debug” icon in the left sidebar (it looks like a play button with a bug).

• Click on “create a launch.json file” and select “Node.js”.
• Replace the contents of the launch.json file with:


{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug TypeScript",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/build/index.js",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": ["${workspaceFolder}/build/**/*.js"]
}
]
}


This tells VSCode how to run and debug our TypeScript project.

4. Automating the Build Process

To make our lives easier, we’ll set up VSCode to automatically compile our TypeScript files:

• Press Ctrl + Shift + P (or Cmd + Shift + P on Mac) to open the command palette.
• Type “Tasks: Configure Task” and select it.
• Choose “tsc: build — tsconfig.json”.

This creates a tasks.json file that tells VSCode how to compile our TypeScript.

5. Debugging Your Code

Now you’re ready to debug!

• In your index.ts file, add a breakpoint by clicking to the left of a line number. A red dot should appear.
• Click the “Run and Debug” icon in the left sidebar.
• Click the green play button next to “Debug TypeScript”.

VSCode will compile your TypeScript and pause at the breakpoint you set. You can now step through your code, inspect variables, and find bugs more easily.

Troubleshooting

If you’re using Windows and encounter issues with the build task not completing:

Open the command palette (Ctrl + Shift + P).
Search for “Terminal: Select Default Profile” and choose PowerShell.
This can resolve some common issues with task execution on Windows.

Conclusion

Congratulations! You’ve set up a NodeJS + TypeScript project with debugging in VSCode. This might seem like a lot at first, but with practice, it’ll become second nature. Remember, debugging is a powerful tool that can save you hours of frustration when trying to find and fix bugs in your code.

Keep experimenting, and don’t be afraid to use the debugger often. It’s there to help you understand what’s happening in your code.