It is possible that the issue lies within your map files rather than the configuration itself.

Prior to attempting any other solutions, it is crucial to verify that the paths specified in your launch configuration are accurate.

You can confirm this by temporarily substituting the paths with absolute paths on your system to test if they function correctly.

If the issue persists, consider the following steps:

Review your tsconfig file and ensure that the mapRoot within compilerOptions remains unset. According to the official documentation:

Specifies where the debugger should locate map files instead of their generated locations. Use this flag if the .map files will be situated at a different location during run-time than the .js files. The designated location will be included in the sourceMap to guide the debugger in locating the map files.

More information can be found here.

In most cases, it is advisable not to set any specific value for it.

Additionally, confirm that

"sourceMap": true`

is configured in the compilerOptions section of your tsconfig.json file and that map files are being successfully generated.

If you happen to come across this situation: when using webpack for your project, make sure to set the devtool option to generate source maps that are compatible with VS Code. After some trial and error, I found that both 'cheap-module-source-map' and 'source-map' work effectively. Here is what I added to my webpack.config.js file:

devtool: env.production ? 'source-map' : 'cheap-module-source-map'

Make sure that source maps are enabled within your tsconfig.json file.

"sourceMap": true,

My issue was resolved by including "sourceMap": true in the tsconfig.json file.

The configuration in my launch.json now appears as follows:

{
"version": "0.2.0",
"configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/src/index.ts",
    "preLaunchTask": "tsc: build - tsconfig.json",
    "outFiles": ["${workspaceFolder}/build/**/*.js"]
  }
]
}

Don't forget that in order to successfully run a program file, it needs to have the focus before execution. Otherwise, you may encounter a 'Cannot find Javascript' error dialog, especially if the file is not a Javascript or Typescript file. This is because the default configuration in the launch.json file specifies "program": "${file}", which means the currently displayed file will be executed.

For instance, if you are working on a non-js or non-ts file like tsconfig.json or launch.json, clicking the Run command will trigger the error dialog.

Setting up a Typescript project correctly in VS Code

Prior to creating the project, ensure that Typescript and Node.js are installed on your machine.

1. Initialize in the terminal

Begin by creating a new folder for your project in the terminal.

mkdir MyProject

Change the directory to the newly created folder.

cd MyProject

Initialize the project to enable Typescript and generate the tsconfig.json file.

tsc --init

Open the folder in VS Code using the following command (macOS specific) or manually.

code .

2. Configure the output directory

In the tsconfig.json file, add the following lines under compilerOptions to specify the output directory. Remember to define this in the tsconfig.json instead of launch.json, as VS Code looks for files in the default outDir specified there (${workspaceFolder}/**/*.js).

"outDir": "./out",  /* Specify .js output files. */
"sourceMap": true   /* Generate corresponding .map files. */

Running/Debugging the project

Create a simple test program: welcome.ts

console.log('Welcome to Typescript');

1. Build

Trigger the Run Build Task (Shift + Command(Ctrl) + B) from the Terminal menu in VS Code and enter the command:

tsc: watch - tsconfig.json

This should be done once initially to start monitoring code changes.

2. Run

To run the Typescript program, make sure the program file with a .ts extension has focus. From the Run menu:

Choose Start Debugging for debugging (F5)

OR

Select Run Without Debugging (Ctrl + F5)

The output will be visible in the Debug Console.

It might seem daunting at first, but it's straightforward once you become familiar with it.

After following @lucascaro's suggestions, my machine was working perfectly fine. However, when testing the same setup on another computer with identical versions of vscode, node, ts, etc., I was still encountering an error message.

If you have implemented all of @lucascaro's instructions and are still seeing the error message, consider adding the following to your launch.json configuration after the program property:

{
  ...
  "preLaunchTask": "tsc: build - tsconfig.json",
  ...
}

This addition resolved the issue on the second machine, but interestingly caused it to stop working on my own. If you are facing similar challenges, give this solution a try.

If you're facing a similar issue, try this solution that worked for me:

To resolve the problem, navigate to your gulpfile.js and locate the line containing sourcemaps.write(). Modify this line as follows:

.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../lib' }))

After making this adjustment, rebuild your project and attempt debugging once more. I found this helpful tip thanks to roblourens on GitHub. You can view his original comment here. Additionally, he referenced this page, which provided valuable insights.

After some troubleshooting, I discovered that the issue was caused by changing the working directory in my launch.json file to a different location:

"cwd": "${workspaceFolder}/dist"

It's possible that this behavior is due to a bug in VSCode.

When I encountered this issue, the Base url was initially created as

"baseUrl": "./",

within the tsconfig.json file.

After modifying it to

"baseUrl": "./src"

The mapping feature began functioning correctly.

In my situation, I included

"sourceRoot": "../../"

within the compiler options of tsconfig.json.

Make sure to verify the relative path

"sourceRoot": ""

that is generated in app.js.map files. The entry

"sourceRoot":"../../","sources":["src/app.ts"]

clearly specifies the absolute path of your .ts files.