vscode debug ts

vscode debug ts

vscode cannot directly execute ts files. You need to install typescript, convert typescript into js , ​​and debug by running the converted js file. When generating js files, you must generate the corresponding .js.map (mapping file) before you can open the ts file. Breakpoint testing

Install ts

Install typescript

npm install typescript -D

Add tsconfig.json file

Configure the tsconfig.json file as required

{
    
    
    "compilerOptions": {
    
    
      "baseUrl": ".",
      "outDir": "./build/src", //输出目录
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "strict": false,  //是否开启类型检测
      "allowJs": true, //允许JS文件，一些和JS混合的项目会使用
      "sourceMap": true,  //生成映射文件
      "esModuleInterop": true,
      "moduleResolution": "node",
      //路径别名
      "paths": {
    
    
        "@/*": [
          "src/*"
        ]
      },
    },
    //包含的编译文件
    "include": [
      "src/**/*"
    ],
    //不包含的编译文件
    "exclude": [
      "node_modules",
    ]
}

Configure package.json

Configure this script command in package.json and use tsc to compile the ts file into js

  "scripts": {
    
    
    "tstest": "tsc -p ./tsconfig.json", //-p 为读取配置文件路径
  },

Configure vscode

Configure launch.json

"configurations": [  
        {
    
    
            "type": "node",
            "request": "launch",  //运行模式
            "name": "ts",
            "program": "${workspaceFolder}/build/${relativeFileDirname}/${fileBasenameNoExtension}.js",
            // 如果存在SourceMap就使用
            "sourceMaps": true,  

            // 调试之前要做的任务名(运行tasks.json文件里面的脚本任务)
            "preLaunchTask": "build test",   

            // 是否启动后自动停止程序
            "stopOnEntry": false,  

            // 生成的代码中，如果无法映射回源代码，就自动单步执行
            "smartStep": true, 
        
        }
    ]

Configure tasks.json

{
    
    
    "version": "2.0.0",
    "tasks": [
            {
    
    
                "label": "tstest",  // 该任务的名字，只需要增加这一条即可
                "type": "npm",
                "script": "ts:test",  //任务等价于 npm run ts:test
            }
        ]
}