Question

vscode 可以直接调试ts文件吗

Answer 1

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