VSCode中调试TypeScript (配置更新)

网上搜了一下用VSCode调试TypeScript的资料,尝试后发现之前的配置方式已经失效,就连ts-node官方说明里的也过时了,一番搜索和尝试后,发现VSCode只要配置一下就可以运行和调试单个ts文件,方式如下:

1、在VSCode中,点击菜单 调试-增加配置,在项目根目录的.vscode文件夹下会生成一个launch.json文件,在launch.json中输入如下内容,name可以随意修改;

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "运行或调试当前文件",
            "program": "${workspaceFolder}/${relativeFile}",
            "preLaunchTask": "tsc: 监视 - tsconfig.json", //VSCode界面使用中文语言的话用这个
            // "preLaunchTask": "tsc: watch - tsconfig.json", //VSCode界面使用英文语言的话用这个
            "outFiles": [
                "${workspaceFolder}/build/es5/**/*.js"
            ]
        }
    ]
}

注意:如果是使用英文界面的话,换成对应的preLaunchTask,另外小程序中要移除所有的注释,不然在预览时会报错;

2、打开要调试的ts文件,使其成为当前正在编辑的文件;

3、通过菜单或快捷键启动运行或调试即可。

下断点的方式:在行号前的空白处点击即可,再次点击取消断点。

 

之前网上使用ts-node的方式:

参考:https://medium.com/spektrakel-blog/debugging-typescript-from-vscode-3cb3a182bf63

1、首先按ts-node官方的说明安装ts-node,此处不作详细说明;

2、在VSCode中,点击菜单 调试-增加配置,在lauch.json中输入如下内容,name可以随意修改:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "调试当前文件/ ts-node",
      "protocol": "inspector",
      "args": ["${relativeFile}"],
      "cwd": "${workspaceRoot}",
      "runtimeArgs": ["-r", "ts-node/register"],
      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
}

3、打开要调试的ts文件,然后选择左侧边栏上的bebug按钮,调出调试页面;

4、在调试配置那选择刚才指定的配置名称,点击左侧的运行按钮就可以运行当前的ts文件。

演示:

另外,如果想进行mocha测试,配置文件如下:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch current file w/ mocha",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "env": {
        "TS_NODE_PROJECT": "src/tsconfig.specs.json"
      },
      "args": [
        "--ui",
        "tdd",
        "--timeout",
        "4000",
        "--colors",
        "--require",
        "ts-node/register",
        "${relativeFile}"
      ],
      "cwd": "${workspaceRoot}",
      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值