如何在vscode中調試typescript? 詳情 - visual-studio-code,typescript,debugging,javascript 熱飯班長動態日志

前置知識

首先要知道vsocde是無法調試typesript的。所以我們要做的就是將typescript編譯為javascript，然後告訴vscode編譯後的代碼位置，這樣才能進行調試。

流程

1 在項目根目錄創建launch.json配置

// package.json

{
  "name": "debug-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // .vscode/launch.json會執行這裏的命令
    "build": "tsc"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^5.4.5"
  }
}

// .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      // 需要調試的代碼入口
      "program": "${workspaceFolder}/src/index.ts",
      // 將代碼編譯為javascript的package命令（對應package.json的script build命令）
      "preLaunchTask": "npm: build",
      // 編譯後的代碼位置
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
    }
  ]
}

2 配置tsconfig.json

// tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // 需要跟.vscode/launch.json中的outFiles呼應
    "outDir": "./dist",
    "rootDir": "./src",
     // 必須啓用以支持斷點調試
    "sourceMap": true
  }
}