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"
        }
    ]
}