在VSCode中运行和调试TypeScript的完整指南

首先安装Node.js、TypeScript和VSCode扩展，初始化tsconfig.json配置编译选项，设置package.json脚本实现构建与运行，再通过launch.json和tasks.json配置调试任务，最后利用sourceMap在VSCode中对TypeScript文件设断点并启动调试，或使用ts-node直接运行以简化开发流程。

要在VSCode中顺利运行和调试TypeScript，关键在于正确配置开发环境。TypeScript本身不能直接在Node.js中执行，必须先编译成JavaScript。下面是如何在VSCode中完成这一流程的完整说明。

1. 安装必要的工具

确保你的系统已安装以下工具：

• Node.js 和 npm：用于运行TypeScript编译器和脚本
• TypeScript 编译器（tsc）：通过npm全局安装：
  npm install -g typescript
• VSCode：推荐安装以下扩展：
  • ESLint（可选）
  • Prettier（可选）

2. 初始化项目并配置 tsconfig.json

进入项目目录，运行以下命令初始化TypeScript配置：

这会生成一个 tsconfig.json 文件。建议修改以下常用选项：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "sourceMap": true
  },
  "include": ["src/**/*"]
}

这样TypeScript会把 src 目录下的 .ts 文件编译到 dist 目录。

3. 添加运行脚本（package.json）

如果还没有 package.json，运行：

然后添加编译和运行脚本：

"scripts": {
  "build": "tsc",
  "start": "node dist/index.js",
  "dev": "tsc && node dist/index.js"
}

现在你可以用 npm run dev 编译并运行程序。

4. 在VSCode中设置调试配置

点击左侧调试图标，然后点击“创建 launch.json”文件，选择 Node.js 环境。VSCode会生成 .vscode/launch.json。修改内容如下：

面试猫

AI面试助手，在线面试神器，助你轻松拿Offer

39

查看详情

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

注意：program 指向的是 .ts 源文件，但实际执行的是编译后的 .js。VSCode借助 sourceMap 实现断点映射。

你还需要定义 preLaunchTask 对应的构建任务。打开 .vscode/tasks.json（没有则创建），内容如下：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "tsc: build",
      "type": "shell",
      "command": "tsc",
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "silent"
      },
      "problemMatcher": ["$tsc"]
    }
  ]
}

5. 开始调试

现在你可以在 .ts 文件中设置断点，按 F5 启动调试。VSCode会自动：

• 运行 tsc 编译代码
• 启动 Node.js 执行 dist/index.js
• 将源码断点映射到运行时行为

调试控制台会显示输出，变量、调用栈等面板均可正常使用。

6. 可选：使用 ts-node 简化流程

如果你不想手动编译，可以使用 ts-node 直接运行TypeScript：

修改 launch.json：

{
  "name": "Run with ts-node",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npx",
  "runtimeArgs": ["ts-node", "src/index.ts"],
  "console": "integratedTerminal"
}

这种方式无需预编译，适合开发阶段快速迭代。

基本上就这些。只要配置好 tsconfig、launch.json 和 task，VSCode就能高效运行和调试TypeScript。关键是理解编译与执行的流程，以及sourceMap如何连接源码与运行代码。

以上就是在VSCode中运行和调试TypeScript的完整指南的详细内容，更多请关注php中文网其它相关文章！