素材巴巴 > 程序开发 >

VsCode中搭建TypeScript调试环境

程序开发 2023-09-06 12:22:29

目录

一、安装Node.js和ts-node插件

二、创建工程目录:

三、在VsCode中点击左侧的调试工具栏=》选择“显示所有自动调试配置” =》点击“添加配置”

四、在下拉列表中选择Node.js:

五、创建launch.json配置文件:

六、为项目配置typescript、ts-node

七、 配置tsconfig.json文件:

八、调试示例:


一、安装Node.js和ts-node插件

        首先确保本机安装了Node.js,并且全局安装了ts-node插件。首先,通过命令“node -v”判断是否安装了Node.js。如果没有安装,需要先安装以下该软件 Node.js安装教程 。其次,全局安装ts-node插件,使用“npm install ts-node -g”命令。

二、创建工程目录:

1、首先在英文路径下创建一个空目录作为TypeScript项目的根目录(我这里目录名为tsStudy),然后通过VsCode打开该目录。

   

2、此时可以在资源管理器中看见该目录:

3、 在项目根目录下创建一个子目录,命名为src,用于存放项目中的.ts源文件。同时可以创建一个demo.ts脚本文件直接放在src子目录下面。在demo.ts脚本文件中写入以下代码,方便后续进行调试测试。

三、在VsCode中点击左侧的调试工具栏=》选择“显示所有自动调试配置” =》点击“添加配置”

 

四、在下拉列表中选择Node.js:

五、创建launch.json配置文件:

        不同版本的VsCode可能创建的方式不同,我当时使用的版本可以通过点击来自动生成改文件,但是有些版本可能需要手动创建。

        如果手动创建,在项目的根目录下创建“.vscode/launch.json”文件。

        如果可以自动创建,可以参考下图:

       

        对于创建的默认的launch.json文件不能满足我们调试TypeScript代码的需求。我们需要修改launch.json文件为以下内容:对于该文件应该如何配置,可以参考该链接:launch.json文件配置

{"version": "0.2.0","configurations": [{"name": "调试TypeScript",    // 配置名称,显示在启动配置下拉菜单中"type": "node",              // 配置类型,TypeScript是通过node来进行调试"request": "launch",         // 请求配置的类型"program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js",    // 可执行文件的绝对路径"args": ["${relativeFile}"        // 传递给程序的命令行参数],"cwd": "${workspaceRoot}",   // cd到工程的根目录下 "protocol": "inspector"}]
 }

六、为项目配置typescript、ts-node

       首先,右键资源管理器面板中的空白目录,选择“在集成终端中打开”。

        其次,切换到项目的根目录下,在终端窗口输入以下命令:“npm install typescript”、“npm install ts-node”。此时,会在项目的根目录下创建一个名为node_modules的文件夹和package.json的文件,如下所示:

七、 配置tsconfig.json文件:

        此时项目的根目录下并没有这个文件,我们需要在根目录下使用终端执行以下命令来创建一个tsconfig.json文件,操作如下所示:

        

        注意:如果执行该命令之后报如下错误,请先按照如下链接解决该错误之后再次执行“tsc --init” 命令。tsc --init报错参考链接 

       

        tsconfig.json文件创建好了之后,将文件内容修改为以下内容:该文件配置详细信息可以见该参考链接:

tsconfig.json配置

tsconfig.json详细配置

{"compilerOptions": {"module": "commonjs",        // 生成代码的模板标准"target": "es6",             // 目标语言的版本,现在基本都是ES6"noImplicitAny": true,       // 不允许隐式的any类型"outDir": "./dist",          // 指定输出目录"sourceMap": true            // 是否生成目标文件的sourceMap文件},// include下指定编译文件,即目标ts文件所在位置:**表示递归子目录;*表示目录下的所有文件// 示例中我将所有的ts文件都放在了src目录下"include": ["src/**/*"        ]
 }

        至此,整个配置流程处理完毕,我们可以进行使用VsCode进行代码调试。

八、调试示例:

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

2、左侧工具栏中点击调试按钮,在运行和调试右侧会出现一个绿色三角形,点击开始进行调试。

 

3、程序会在设置断点的地方停止,同时上方会出现一个“调试工具栏”面板 ,调试过程中我们可以在“监听选项”中添加需要监听的变量,并且可以将鼠标移动到变量上面查看变量的值。


标签:

上一篇: JavaScript - 7 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。