编程开发

关注公众号 jb51net

关闭
软件教程 > 编程开发 >

VSCode怎么运行TypeScript? VSCode配置并调试TypeScript代码的技巧

脚本之家

VSCode如果配置并调试TypeScript代码?本篇经验将和大家介绍在VSCode中配置并调试TypeScript代码,希望对大家的工作和学习有所帮助!

首先确保本机已安装Node.js,并全局安装了ts-node插件,如下图所示:

使用VSCode打开一个空目录,在下面创建一个src目录,并在其下面创建两个ts脚本,如下图所示:

在VSCode中点击左侧的调试工具栏,选择“显示所有自动调试配置”,点击“添加配置”,如下图所示:

选择Node.js,如下图所示:

之后在项目根目录下,默认会创建一个.vscode的目录,下面包括一个名为launch.json文件,如下图所示:

右键资源管理器面板中的空白目录,选择“在集成终端中打开”,如下图所示:

在项目根目录下,在终端窗口,输入命令

npm install typescript ts-node

根目录下会创建一个名为node_modules的文件夹和package.json文件,如下图所示:

根目录下我们创建一个名为tsconfig.json文件,内容如下

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

,如下图所示:

打开.vscode/launch.json文件,修改如下

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

,如下图所示:

打开某个ts文件,在需要跟踪调试的代码行前面点击下会出现一个小红点,说明成功创建了一个断点,如下图所示:

左侧工具栏中点击调试俺妞,在运行和调试右侧出现一个绿色三角形,点击开始调试,如下图所示:

测试程序会停止在刚设置断点的地方,并且上方会出现一个调试工具栏面板,如下图所示:

调试过程中,可以在监视选项中添加要跟踪监视的变量,如下图所示:

单步调试过程中,我们也可以将鼠标移入到程序变量上查看变量的值,如下图所示:

以上就是VSCode配置并调试TypeScript代码的技巧,希望大家喜欢,请继续关注脚本之家。

相关推荐:

vscode怎么导入图片? vscode把图片放进程序的技巧

VSCode中git怎么开启智能提交? VSCode智能提交的设置方法

Visual Studio Code怎么设置持久会话? vscode开启持久会话的技巧

阅读全文