vscode 可以直接调试ts文件吗

Posted 2023-04-17

参考技术A vscode使用task.json来配置项目的构建过程。
打开命令面板(Ctrl+Shift+P)选择Run Build Task(Ctrl+Shift+B)

如果当前工作空间没有task.json配置文件此时会出现提示

选择 Configure Task Runner 自动创建task.json。该配置文件在工作空间的.vscode目录下，这个目录也是存放vscode配置的文件夹。
vscode默认的task配置文件中给出了执行tsc 和 gulp模板配置。简单介绍一下task.json的写法

"version": "0.1.0",

// 要使用的命令或者可执行文件的路径
"command": "tsc",

// 对应command参数，是否是一个命令，否则为执行文件路径
"isShellCommand": true,

// 是否在执行task任务时显示控制台窗口
"showOutput": "always",

// 对应command参数指定程序的参数
"args": ["-p", "src", "--allowJs", "-w"],

// 不太明白这个，基本用不到
"problemMatcher": "$tsc",


另外还有更多参数和用法可以参照下面的官方文档
https://code.visualstudio.com/docs/editor/tasks
配置好了之后使用默认的快捷键Ctrl+Shift+B即可执行编译。
运行和调试项目
vscode默认支持nodejs，ts，js等项目的调试。使用launch.jsonp配置调试参数。
调试启动调试的默认快捷键是F5， 如果没有launch.json则会弹窗提示选择调试环境，并自动创建launch.json本回答被提问者采纳

使用VsCode断点调试TS

目录下新建 tsconfig.json

{
  "compilerOptions": {
      "module": "commonjs",
      "target": "es5",
      "noImplicitAny": true,
      "outDir": "./dist",
      "sourceMap": true
  },
  "include": [
      "src/**/*"
  ]
}

 

配置 launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Current TS File",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js",
            "args": [
                "${relativeFile}"
            ],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        }
    ]
}

 

 

调试

　　

　　按F5

　　　　

　　　　

 

 

开始愉快的调试了