本文摘自PHP中文网，作者藏色散人，侵删。
vscode怎么调试ts？
vscode 调试 TypeScript
环境
typescript :2.5.2
vscode:1.16.0
vscode 直接调试 ts 文件
源码:github
（https://github.com/meteor199/my-demo/tree/master/typescript/vscode-debug）
安装 typescript 依赖
1 | npm install typescript --save-dev
|
添加 tsconfig.json
主要是将 sourceMap 设置为true。
1 2 3 4 5 6 7 8 9 10 11 12 | {
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true
},
"include": [
"src/**/*"
]
}
|
配置自动编译
利用 vscode 的 tasks 自动将 ts 编译为 js。也可以使用别的方式编译，如:gulp,webpack 等。
添加文件: /.vscode/tasks.json
1 2 3 4 5 6 7 8 9 10 11 | {
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", ".","-w"],
"showOutput": "always",
"problemMatcher": "$tsc"
}
|
使用快捷键 Ctrl + Shift + B 开启自动编译。
配置调试
调试时，需要配置 vscode 的 launch.json 文件。这个文件记录启动选项。
添加或编辑文件 /.vscode/launch.json。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | {
"version": "0.2.0",
"configurations": [
{
"name": "launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/dist/main.js",
"args": [],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}
|
注意 : program 需设置为你要调试的 ts 生成的对应的 js。
阅读剩余部分
相关阅读 >>
vsCode怎么输入正则表达式进行匹配
vsCode怎么新建项目
vsCode编译运行c++程序时无法读取头文件
vsCode 插件安装在哪
安装这几个插件，让你的vsCode更好用！
vsCode实现快速查看并修复vue错误
解决vsCode无法使用ng命令的问题
vsCode如何解决中文乱码问题
vsCode不能补全标签怎么办
如何打开vsCode中的用户自定义配置
更多相关阅读请进入《vsCode》频道 >>
转载请注明出处：木庄网络博客 » vscode怎么调试ts
