VS Code调试TypeScript基本流程

refineiks

已于 2023-11-03 21:26:21 修改

阅读量3.7k

点赞数 5

文章标签： typescript 前端

于 2023-10-14 16:08:42 首次发布

本文链接：https://blog.csdn.net/2301_79959413/article/details/133770872

版权

web前端专栏收录该内容

5 篇文章

订阅专栏

最近接触到的几个开源库源码都是用TypeScript写的（看来ts是大势所趋，不学不行啊）。虽然说不懂ts也能正常调API，但是碰到有意思的功能还是想跟进去看一看、改一改。

在学习了基本的ts语法后有了调试的需求。如果用tsc编译出js，再去调试js还是太麻烦。如果能在VS Code中直接调试ts就完美了。在查阅一些资料后，我总结了一个基本流程，方便以后查阅，不足之处也请大家指正。

配置TypeScript编译选项

新建tsc的配置文件tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true,
  },
  "include": [
    "src/**/*"
  ]
}

tsconfig.json

对用到的几个属性加以说明

target : 编译出 JavaScript 代码的 ECMAScript 版本
module : 编译出 JavaScript 文件的模块格式
outDir : 编译出 JavaScript 文件的存放位置；
sourceMap : 是否生成 SourceMap 文件；（不生成SourceMap不会进端点）
include : 指定要编译的文件；

以上属性都有多种可取值，详情可以参考阮一峰老师的文章tsconfig.json

VS Code集成TypeScript编译配置

快捷键Ctrl+Shift+B，创建tasks.json，用于关联tsc编译工具到VS Code。

Ctrl+Shift+B创建tasks.json弹出的两个选项

第一个选项是每次手动编译后生成js；第二个选项是每次修改、保存后都重新编译js。这里我们点击第一个选项后面的配置图标，生成tasks.json文件。

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "typescript",
			"tsconfig": "tsconfig.json",
			"problemMatcher": [
				"$tsc"
			],
			"group": "build",
			"label": "tsc: build - tsconfig.json"
		}
	]
}

tasks.json

VS Code调试配置

切换到调试面板，点击"create a launch.json file"创建默认的launch.json文件，用于配置调试选项。

生成的launch.json中，修改默认的program属性，并新增preLaunchTask属性，得到如下内容。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/index.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": ["${workspaceFolder}/out/**/*.js"]
        }
    ]
}

launch.json

以上两个属性的说明