在节点应用程序中遇到断点时如何使VSCode打开“src”的原始TS文件

Question

I have a CLI node app that I am trying to debug with VSCode. It works pretty well, however when hitting a breakpoint, VSCode opens a new code view from the source map file instead of the actual TS file located in my "src" folder. This is kind of annoying. When I run some JS code in a browser using VSCode as a debugger, VSCode opens the actual TS file as expected. How do I get this behavior also with node?

launch.json :

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Node",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/bin/js/index.js",
            "console": "integratedTerminal",
            "cwd": "${workspaceFolder}/bin/js",
            "args": [
                "authorize"
            ]
        }
    ]
}

tsconfig.json :

{
    "compilerOptions": {
        "baseUrl": "./src",
        "moduleResolution": "node",
        "module": "ES2020",
        "target": "ES2018",
        "allowSyntheticDefaultImports": true,
        "jsx": "react",
        "strict": true,
        "strictPropertyInitialization": true,
        "noEmitOnError": true,
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outDir": "./bin",
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

webpack.config.json :

const path = require("path");
const webpack = require("webpack");
const { merge } = require('webpack-merge');

const commonConfig = {
    target: 'node',
    entry: "./src/Startup.ts",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [{
                    loader: "ts-loader"
                }]
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"],
        modules: ["./src", "node_modules"]
    },
    output: {
        path: path.resolve(__dirname, "./bin/js/"),
        filename: "index.js",
    },
    plugins: [
        new webpack.DefinePlugin({ "global.GENTLY": false })
    ],
    externals: {
        'cliui': 'commonjs2 cliui',
        'y18n': 'commonjs2 y18n',
        'yargs-parser': 'commonjs2 yargs-parser',
    }
}

const developmentConfig = {
    mode: 'development',
    devtool: 'source-map',
    stats: {
        warnings: false
    }
}

const productionConfig = {
    mode: 'production'
}

module.exports = (env, argv) => {
    switch(argv.mode) {
      case 'development':
        return merge(commonConfig, developmentConfig);
      case 'production':
        return merge(commonConfig, productionConfig);
      default:
        throw new Error(`Configuration '${argv.mode}' does not exists.`);
    }
}

Answer 1

The TS file paths generated by Webpack in the source map files are using the webpack protocol that VSCode did not understand. I solved it by adding this parameter in my webpack.config.js so the source map contains absolute paths to the TypeScript files instead:

const commonConfig = {
    output: {
        devtoolModuleFilenameTemplate: "[absolute-resource-path]",
    },
}