vscode——如何调试typescript

前言

最近在学习TS,为了方便研究下如何使用vscode进行调试,前提是您本地已经安装过typescript且可正常使用tsc;

debugging: https://code.visualstudio.com/docs/editor/debugging#_debug-actions
tasks: https://code.visualstudio.com/docs/editor/tasks#_typescript-hello-world

内容

配置tsconfig.json

根据自己的实际去配置即可

{
    "compilerOptions": {
        "module": "system",
        "target": "ES2015",
        "strict": true,
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "sourceMap": true
        
    },
    "include": [
        "./src/**/*"
    ]
}

配置运行tasks.json

当然也可以在终端运行tsc -w

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

创建配置launch.json

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            // 对应tsconfig.json下的outFile
            "program": "${workspaceRoot}/dist/app.js"
        }
    ]
}