本文将详细介绍在VSCode中配置与调试TypeScript代码的方法,帮助提升开发效率,适用于日常学习与工作场景,助力开发者更高效地编写和调试TypeScript项目。
1、 确保计算机已安装Node.js,并全局配置ts-node插件,具体步骤所示。
2、 在VSCode中打开一个空文件夹,新建src目录,并在其中创建两个ts文件,具体结构所示。
3、 在VSCode左侧调试栏中,选择显示所有自动配置,然后点击添加配置即可完成设置。
4、 选择Node.js,所示。
5、 项目根目录会自动生成一个.vscode文件夹,其中包含名为launch.json的配置文件,具体结构所示。
6、 在资源管理器空白处右键,点击在集成终端中打开,操作所示。
7、 在项目主目录的终端中执行指定命令
8、 在根目录中将生成一个名为 node_modules 的文件夹以及 package.json 文件,具体结构所示。
9、 在根目录新建一个名为tsconfig.json的文件,具体内容如下所示。
10、 {
11、 },
12、 ]
13、 }
14、 所示,见下图
15、 打开.vscode目录下的launch.json文件并进行相应修改
16、 {
17、 {
18、 调试TypeScript代码,确保运行无误。
19、 ],
20、 }
21、 ]
22、 }
23、 所示,见下图:
24、 打开ts文件,在目标代码行前点击,出现小红点即表示断点设置成功,可用于跟踪调试程序运行过程。
25、 在左侧工具栏选择调试功能,右侧运行栏会出现绿色三角按钮,点击即可启动调试,操作所示。
26、 程序将在新设断点处暂停,上方显示调试工具栏面板,所示。
27、 调试时,可在监视窗口添加需跟踪的变量,具体操作所示。
28、 调试时,将鼠标悬停在变量上即可查看其当前值,操作直观便捷。
