'Typescript debugging in Visual Studio Code with tsconfig-paths
I've been trying to get Visual Studio Code to debug Typescript, and keep getting close but not quite there. I'm going by the tsconfig-paths documentation since I have paths defined in tsconfig. I'm able to launch from VSC, but when VSC stops on a breakpoint in the TS code, it stops on the corresponding code in the generated JS. Here is what I have:
tsconfig:
"compilerOptions": {
"lib": ["es2020"],
"target": "es2020",
"outDir": "build",
"module": "CommonJS",
"baseUrl": ".",
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"paths": {
"@/*": ["src/*"]
}
}
}
package.json:
"scripts": {
"build": "tsc",
"start": "npm run build && node ./build/index.js"
},
"dependencies": {
},
"devDependencies": {
"@types/node": "15.3.0",
"ts-node": "^10.7.0",
"ts-node-dev": "^1.1.8",
"tsconfig-paths": "^3.14.0",
"typescript": "4.2.4"
}
}
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": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/build/index.js",
"runtimeArgs": [
"-r",
"ts-node/register",
"-r",
"${workspaceFolder}/node_modules/tsconfig-paths/register",
"src"
],
"args": [
"${workspaceFolder}/src/index.ts"
],
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": [
"${workspaceFolder}/build/**/*.js"
],
"cwd": "${workspaceFolder}",
"protocol": "inspector",
"env": {
"NODE_ENV": "development",
"TS_NODE_PROJECT": "${workspaceFolder}/tsconfig.json"
}
}
]
}
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "build",
"group": "build",
"problemMatcher": [],
"label": "npm: build",
"detail": "tsc"
}
]
}
./src/index.ts
import { createApp } from "@/app";
createApp();
./src/app/index.ts
export const createApp = () => {
const test = 'test';
console.log('Inside createApp');
console.log(`test = ${test}`);
}
I'm setting my breakpoint on line 3 of ./src/app/index.ts, but when I launch, it stops at:
What do I have set incorrectly?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

