使用 tsconfig-paths 在 Visual Studio Code 中进行打字稿调试

Dav*_*ami 5 typescript visual-studio-code vscode-debugger

我一直在尝试让 Visual Studio Code 来调试 Typescript,并不断接近但还没有完全实现。我将查看tsconfig-paths 文档,因为我在 tsconfig.h 中定义了路径。我可以从 VSC 启动,但是当 VSC 在 TS 代码中的断点处停止时,它也会在生成的 JS 中的相应代码处停止。这是我所拥有的:

ts配置:

  "compilerOptions": {
    "lib": ["es2020"],
    "target": "es2020",
    "outDir": "build",
    "module": "CommonJS",
    "baseUrl": ".",
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "paths": {
        "@/*": ["src/*"]
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

包.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"
  }
}
Run Code Online (Sandbox Code Playgroud)

启动.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"
            }
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)

任务.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "build",
            "group": "build",
            "problemMatcher": [],
            "label": "npm: build",
            "detail": "tsc"
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)

./src/index.ts

import { createApp } from "@/app";

createApp();
Run Code Online (Sandbox Code Playgroud)

./src/app/index.ts

export const createApp = () => {
    const test = 'test';
    console.log('Inside createApp');
    console.log(`test = ${test}`);
}
Run Code Online (Sandbox Code Playgroud)

我在 ./src/app/index.ts 的第 3 行设置断点,但是当我启动时,它停止在:

我哪里设置不正确?