如何在visual studio代码中调试typescript文件

Question

使用0.3版本的视觉工作室代码，我不知道如何启用源地图和调试ts文件

我遇到以下错误无法启动程序'/Projects/app server/server。ts'；启用源地图可能会有所帮助

如何启用源地图和打字稿调试。源地图在我的

tsconfig。json

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true
    }
}

launch.json

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Launch server.ts",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // Workspace relative or absolute path to the program.
            "program": "server.ts",
            // Automatically stop program after launch.
            "stopOnEntry": true,
            // Command line arguments passed to the program.
            "args": [],
            // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
            "cwd": ".",
            // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Environment variables passed to the program.
            "env": { }
        }, 
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858
        }
    ]
}

Answer 1

这就是我从2017年11月开始使用最新TS和VsCode的工作原理

以下配置将帮助您启动服务器并调试VS代码中的TS

这就是我的配置。json看起来像：

{
    "compilerOptions": {
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2017", "dom"],
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "../build",
        "sourceMap": true,
        "target": "es2016",
        "typeRoots": [
            "../node_modules/@types"
        ]
    },
    "include": [
        "**/*.ts"
    ],
    "exclude": [
        "../node_modules",
        "../*.js"
    ]
}

这就是我的目录结构：

如果你注意，你会看到我的src文件夹和构建文件夹（包含结果转播的JS和映射文件）并排存在，这真的有助于我维护一个逻辑目录结构。

好的，现在是启动配置：

{
            "type": "node",
            "request": "launch",
            "name": "Start and Debug",
            "preLaunchTask": "nb-tsc-watch",
            "timeout": 10000,
            "program": "${workspaceFolder}/backend/src/app.ts",
            "restart": true,
            "cwd": "${workspaceRoot}",
            "outFiles": [
                "${workspaceFolder}/backend//build/**/*.js"
            ],
            "sourceMaps": true
        }

你可以使用任何你想使用的任务，甚至可以跳过它。如果跳过它，就必须手动将TS传输到JS。

这就是我在任务中所做的nb tsc watch

{
            "label": "nb-tsc-watch",
            "type": "typescript",
            "tsconfig": "backend/src/tsconfig.json",
            "option": "watch",
            "problemMatcher": [
                "$tsc-watch"
            ]
        }

Answer 2

我觉得随着版本的发布，它变得越来越简单。。。

我已经安装了ts节点(https://github.com/TypeStrong/ts-node)，所以我的配置文件非常简单。

安装ts节点使用npm安装ts节点——将dev保存在项目文件夹中——感谢评论中的Hrafnkell

{
        "name": "Launch index.ts",
        "type": "node",
        "request": "launch",
        "runtimeArgs": [
            "-r",
            "ts-node/register"
        ],
        "args": [
            "${workspaceFolder}/src/index.ts"
        ]
}

有两件事值得注意：

• runtimeArgs-传递给节点以注册ts节点以处理TypeScript文件

这样，您就不需要将TS编译成JS，甚至可以让用TS编写的模块尚未编译成JS。

Answer 3

这个配置对我来说很好：

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

想法是在src文件夹下编译类型脚本，并将其放在bin文件夹下。

激活sourceMap选项很重要。

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

====编辑====

这是我目前在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能够按名称检测其任务。

1. 编译您的ts（输入终端rm-r bin/； tsc或执行编译任务）
2. 在可视化代码播放启动类型（我们的配置名称）
3. 享受！