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"]
}
相关推荐
梦幻通灵6 小时前
IDEA通过Contince接入Deepseek
java·ide·intellij-idea
鸡啄米的时光机7 小时前
vscode的一些实用操作
vscode·学习
灰色人生qwer11 小时前
React + TypeScript+ Vite 配置路径别名和vscode智能路径提示
vscode·react.js·typescript
莲动渔舟11 小时前
赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
ide·人工智能·vscode·deepseek
cv也要开心12 小时前
Cursor 开源平替 Cline 到底是如何实现的?本文带你刨根问底
前端·typescript·cursor
咩咩大主教12 小时前
VSCode运行Go程序报错:Unable to process `evaluate`: debuggee is running
开发语言·ide·vscode·golang·编辑器
佛曰我不想说话12 小时前
通过VSCode直接连接使用 GPT的编程助手
ide·vscode·copilot
羊村懒哥15 小时前
VScode内接入deepseek包过程(本地部署版包会)
人工智能·vscode·deepseek
温酒往事·16 小时前
无缝对接[系列2]:在VSCode中继续接入本地DeepSeek的完整指南
ide·vscode·编辑器
半旧夜夏19 小时前
阿里云IOT消息处理
java·ide·git·物联网·spring·阿里云