vscode调试ts

vscode调试ts

vscode无法直接执行ts文件，需要安装typescript，将typescript转化为js，在通过运行转化的js文件来进行调试，生成js文件时要生成对应的.js.map(映射文件)，才能在ts文件打断点测试

安装ts

安装typescript

npm install typescript -D

添加tsconfig.json文件

根据要求配置tsconfig.json文件

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

配置package.json

在package.json中配置这条脚本命令，通过tsc来编译ts文件为js

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

配置vscode

配置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, 
        
        }
    ]

配置tasks.json

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