本文摘自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 eslint不生效
vsCode如何定位文件位置
vsCode终端乱码如何解决
vsCode如何安装git
vsCode实现不显示“.meta”文件
vsCode怎么使用调试
vsCode中如何快速生成html头部标识
vsCode怎么切换代码高亮颜色
vsCode可以写php吗?
vsCode不显示git文件
更多相关阅读请进入《vsCode》频道 >>
转载请注明出处:木庄网络博客 » vscode怎么调试ts