VSCode中TypeScript调试配置

一、背景

最近想用TypeScript编译项目,在创建完项目后,我发现VSCode只有在调试TypeScript的单个文件时生效,如果存在引用,再进行断点调试,则调试功能不生效了。

随后,我让Chatgpt 生成一个一套配置,发现是生效的。 因此记录一下。 下面是具体内容:

面临的问题是:

在没有Test.ts 文件时, 给hello()函数增加断点,断点功能正常;

在有Test.ts 文件时, 给hello()函数增加断点或者给test函数增加断点,断点功能不正常;

当时VSCode生成的launch.json文件内容如下:

json 复制代码
// .vscode/launch.json
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

后来我用chatgpt生成了一套json文件,能够实现我期望的调试功能。 接下来进入整体

二、TS构建的流程及相关配置文件

在VScode工程环境下,一共有三个json配置文件:

launch.json : 配置了 启动的前置任务(preLaunchTask) 和 程序启动入口(program)

tasks.json : 可以定义一些列任务。 此处就是 定义了一个 要去编译TS的任务;

tsconfig.json : 定义 ts的编译配置选项;

接下来就是这三个文件的具体内容:

json 复制代码
// file : .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/dist/index.js",  // 指向编译后的入口文件
        "preLaunchTask": "TS转JS",  // 在调试前编译 TypeScript
        "outFiles": [
          "${workspaceFolder}/dist/**/*.js"  // 指定编译输出文件的位置
        ],
        "sourceMaps": true,  // 启用 source maps
        "skipFiles": [
          "<node_internals>/**"
        ]
      }
    ]
  }
json 复制代码
// file:.vscode/tasks.json
{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "TS转JS",
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "problemMatcher": ["$tsc"],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      }
    ]
}
json 复制代码
// tsconfig.json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true,  // 生成 source maps
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}
相关推荐
罗政7 小时前
冒险岛079 V8 整合版源码搭建教程+IDEA启动
java·ide·intellij-idea
艾斯比的日常8 小时前
VSCode 实用快捷键
ide·vscode·编辑器
Galaxy_12298 小时前
vscode远程报错:Remote host key has changed,...
ide·vscode·编辑器
彬sir哥8 小时前
VScode运行后出现黑窗口
vscode·运行·黑窗口
Hi~晴天大圣14 小时前
Pycharm中断点使用技巧
ide·python·pycharm
DCTANT14 小时前
【原创】vue-element-admin-plus完成编辑页面中嵌套列表功能
前端·javascript·vue.js·elementui·typescript
且随疾风前行.15 小时前
Android Studio 提示 !Failed to initialize editor
android·ide·android studio
比牛顿更懂PID16 小时前
VSCode本地python包“无法解析导入”
ide·vscode·python
Hamm16 小时前
巧妙使用Vue3泛型组件,提升你的组件使用体验
前端·vue.js·typescript
qxyywy18 小时前
CUDA 安装 一直卡在Installing Nsight Visual Studio Edition
ide·visual studio·cuda