Can’t debug current typescript file in VS Code because corresponding JavaScript cannot be found

I am using Visual Studio Code version 1.17, and my objective is to debug the current typescript file. I have a build task running, so I always have a corresponding javascript file like this:

src/folder1/folder2/main.ts
src/folder1/folder2/main.js

I have tried with the following launch.json configuration:

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": [
    "${workspaceFolder}/${fileDirname}**/*.js"
  ]
}

But I get the error: Cannot launch program '--full-path-to-project--/src/folder1/folder2/main.ts' because corresponding JavaScript cannot be found.

But the corresponding JavaScript file exists!

tsconfig.json:

{
"compileOnSave": true,
"compilerOptions": {
    "target": "es6",
    "lib": [
        "es2017",
        "dom"
    ],
    "module": "commonjs",
    "watch": true,
    "moduleResolution": "node",
    "sourceMap": true
    // "types": []
},
"include": [
    "src",
    "test"
],
"exclude": [
    "node_modules",
    "typings"
]}

Answer

The configuration for your outFiles points to the wrong directory.

Replacing your launch.json config with this would fix it:

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": ["${fileDirname}/*.js"]
}

From the vscode launch.json variable reference:

${fileDirName} the current opened file’s dirname

should be the directory you need.

Note that you can also use "outFiles": ["${fileDirname}/**/*.js"] to include subdirectories.

The configuration you’re using adds the following directory:

"${workspaceFolder}/${fileDirname}**/*.js"

Which translates to something like:

"/path/to/root/path/to/root/src/folder1/folder2/**/*.js"

i.e. the path to the root is in there twice, making it an invalid path.

If your .js files are on a different outDir: simply use the path to such directory. Typescript sourceMaps will do the rest.

For example, if you put your .js files in a dist directory:

"outFiles": ["${workspaceFolder}/dist/**/*.js"]