且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在 Visual Studio 代码中调试打字稿文件

更新时间:2021-12-25 09:07:58

这个配置对我来说很好用:

This configuration is working fine for me:

|-- .vscode
    |----- launch.json
|-- bin
    |----- app.js
    |----- app.js.map
|-- src
    |----- app.ts
|-- node_modules
    |-- [..]
|-- tsconfig.json
|-- [...]

想法是编译src文件夹下的打字稿,并将其放在bin文件夹下.

The idea is compile the typescript under src folder and place it under bin folder.

激活 sourceMap 选项很重要.

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "module": "commonjs",
        "target": "ES5",
        "outDir": "bin",
        "rootDir": "src",
        "sourceMap": true
    }
}

launch.json

==== 编辑 ====

launch.json

==== EDIT ====

这是我目前在 Visual Studio Code v1 中使用的配置:

This is the configuration I'm currently using at Visual Studio Code v1:

{
    "version": "0.2.0",
    "configurations": [
        {
            "args": [],
            "cwd": "${workspaceRoot}",
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "name": "DEBUG",
            "outDir": "${workspaceRoot}/bin",
            "preLaunchTask": "compile",
            "program": "${workspaceRoot}/src/app.ts",
            "request": "launch",
            "runtimeArgs": [
                "--nolazy"
            ],
            "runtimeExecutable": null,
            "sourceMaps": true,
            "stopOnEntry": false,
            "type": "node"
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858
        }
    ]
}

请注意,如果您将任何任务运行器用作 gulp,关键 preLaunchTask 将非常有用> 因为 IDE 能够通过名称检测其任务.

Note the key preLaunchTask is extremely helpful if you're using any task runner as gulp because the IDE is able to detect its tasks by name.

  1. 编译您的 ts(在终端中输入 rm -r bin/; tsc 或执行您的编译任务)
  2. 在可视化代码中播放Launch type(我们的配置名称)
  3. 享受吧!
  1. Compile your ts (typing in a terminal rm -r bin/ ; tsc or executing your compiling task)
  2. In visual Code play Launch type (our configuration name)
  3. Enjoy!