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

Question

使用Visual Studio代码的0.3版本,我不知道如何启用源映射和调试ts文件

我收到以下错误 can't launch program '/Projects/app-server/server.ts'; enabling source maps might help

如何启用源映射和打字稿调试.在我的中,Sourcemap设置为true

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

这个配置对我来说很好:

项目分配

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

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

tsconfig.json

激活sourceMap选项很重要.

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

launch.json

====编辑====

这是我目前在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
        }
    ]
}

请注意,preLaunchTask如果您使用任何任务运行器作为gulp,则该键非常有用,因为IDE能够按名称检测其任务.

运行

1. 编译你的ts(输入终端rm -r bin/ ; tsc或执行你的编译任务)
2. 在Visual Code play中Launch type(我们的配置名称)
3. 请享用!

Answer 2

我认为它比发布更简单,更简单......

我安装了ts-node,所以我的配置文件最终非常简单......

launch.json

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

有两个值得注意的事情:

• runtimeArgs - 传递给节点以注册ts节点以处理TypeScript文件.
• 没有program财产.要启动的TS文件的名称将作为第一个参数给出.

这样你就不需要将TS编译成JS,你甚至可以将用TS编写的模块编译成JS.

Answer 3

这是我在2017年11月使用最新的TS和VsCode为我工作的原因

以下配置将帮助您启动服务器并在VS Code中调试TS

这就是我的tsconfig.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
        }

您可以使用您想要使用的任何preLaunchTask,甚至可以跳过它.如果你跳过它,你必须手动将TS转换为JS.

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

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

Answer 4

对于2017年2月更晚版本的VSCode,这对我有用(它是@manu和@tommy Falgout提供的组合):

它假定您的json out文件分别位于dest文件夹中,而源文件位于src文件夹中

/.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [{
            "type": "node",
            "request": "launch",
            "name": "Launch",
            "sourceMaps": true,
            "stopOnEntry": true,
            "console": "internalConsole",
            "cwd": "${workspaceRoot}",
            "program": "${workspaceRoot}/src/main.ts",
            "outFiles": ["${workspaceRoot}/dest/*.js"]
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 5858,
            "outFiles": []
        }
    ]
}

tsconfig.json

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "module": "commonjs",
        "outDir": "dest",
        "rootDir": "src"
    },
    "exclude": [
        "node_modules"
    ]
}

Answer 5

下面的设置用断点测试摩卡柴.它的工作原理是将src转换为lib目录,然后在lib中运行测试,并将sourceMapping运行回src.

.vscode/launch.json

{
    "type": "node",
    "request": "launch",
    "preLaunchTask": "tsc",
    "name": "Run Mocha",
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    "args": ["lib/**/*.js"],
    "cwd": "${workspaceRoot}",
    "sourceMaps": true,
    "outFiles": ["${workspaceRoot}/lib/**/*.js"]
}

tsconfig.json

{
  "compilerOptions": {
      "module": "commonjs",
      "sourceMap": true,
      "outDir": "lib",
      "target": "es6"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

.vscode/tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

package.json显示已安装的模块.脚本与调试无关.

"scripts": {
  "test": "mocha --compilers ts:ts-node/register src/**/*.spec.ts",
  "test:coverage": "nyc -e '.ts' npm test"
},
"dependencies": {
  "@types/chai": "^3.4.35",
  "@types/mocha": "^2.2.39",
  "@types/node": "^7.0.5",
  "@types/sinon": "^1.16.35",
  "chai": "^3.5.0",
  "mocha": "^3.2.0",
  "nyc": "^10.1.2",
  "sinon": "^1.17.7",
  "ts-node": "^2.1.0",
  "typescript": "^2.2.1"
}

• Mac OSX 10.12.3 Sierra
• Visual Studio Code 1.10.1
• NodeJS v7.7.1

Answer 6

如果您不想硬编码文件名但喜欢这里简单的Grogi版本？使用VS 变量参考页面中的信息，您可以做两件事：

npm i ts-node

然后像launch.json（以防万一，但你只能从中获取这一个配置）：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch TS",
            "type": "node",
            "request": "launch",
            "runtimeArgs": [
                "-r",
                "ts-node/register"
            ],
            "args": [
                "${workspaceFolder}/${fileBasename}"
            ]
        }
    ]
}

该 VSC 页面中的几个示例 - 有时您可以使用 Ctrl+Space 来获取它们，但对我来说在现有的内部不起作用：

${workspaceFolder} - /home/your-username/your-project
${workspaceFolderBasename} - your-project
${file} - /home/your-username/your-project/folder/file.ext
${relativeFile} - folder/file.ext
${relativeFileDirname} - folder
${fileBasename} - file.ext
${fileBasenameNoExtension} - file
${fileDirname} - /home/your-username/your-project/folder
${fileExtname} - .ext
${lineNumber} - line number of the cursor
${selectedText} - text selected in your code editor
${execPath} - location of Code.exe