1. 简介
Visual Studio Code (VScode) 是一个运行于多平台的、开源、轻量级的集成开发环境（IDE）。它支持多种编程语言，其中包括 TypeScript。在本文中，我们将介绍如何使用 VScode 调试 TypeScript 代码。
2. 安装 TypeScript 插件
2.1 下载和安装 VScode
想要使用 VScode 进行 TypeScript 开发，首先需要安装 VScode。你可以在 VScode的官网 下载并安装适合你的系统的版本。
2.2 安装 TypeScript 插件
当你安装好 VScode 后，下一步就是安装 TypeScript 插件。你可以从 VScode 的扩展面板中搜索 “TypeScript” 插件进行安装，或者直接在 VScode 的插件市场 中下载安装。
1. 打开 VScode
2. 点击左侧的“扩展”（Extensions）按钮
3. 在搜索框中搜索 “TypeScript”
4. 选择安装 “TypeScript” 插件
或者
1. 打开 VScode
2. 访问 VScode 的插件市场：https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next
3. 点击“Install”按钮。
3. 配置 VScode 正确识别 TypeScript
在安装了 TypeScript 插件后，为了让 VScode 正确识别 TypeScript 代码，需要进行如下配置。
3.1 配置 VScode 的 User Settings
在 VScode 中，打开 “Settings”，并在右上角的“Open settings.json”处进行设置。在 settings.json 中，添加以下代码：
{
"files.associations": {
"*.ts": "typescript"
}
}
保存以上修改后，即可让 VScode 正确识别“.ts”文件的类型为 TypeScript。
3.2 配置 tsconfig.json
TypeScript 编译器需要 tsconfig.json 文件来编译 TypeScript 代码。通常，你的 tsconfig.json 文件会位于你的工程根目录下。
打开 tsconfig.json 文件，并添加以下配置项：
{
"compilerOptions": {
"outDir": "./lib",
"sourceMap": true,
"target": "es5",
"module": "commonjs",
"lib": ["es6", "dom"],
"declaration": true,
"watch": true
},
"include": [
"./src/**/*"
],
"exclude": [
"node_modules"
]
}
以上是一个具有比较全面配置项的 tsconfig.json 文件，但对于目前的目的而言，着重需要注意的是:
sourceMap: 配置为 true，生成 sourcemap。
outDir: 配置编译完成后的文件存储路径。
include: 配置需要编译的目录或文件，可以使用 glob 模式。
exclude: 排除不需要编译的目录或文件，也可以使用 glob 模式。
4. 配置调试
在安装完并配置好 VScode 和 TypeScript 插件后，可以在 VScode 中添加调试配置。
4.1 添加 launch.json 文件
打开 VScode 的一个 TypeScript 项目，运行“调试”（Debug）面板。
如果你已经添加了一个调试配置，那么 VScode 会弹出一个类似于以下的选项：
Select environment to debug:
? Node.js
Chromium
Chrome
Firefox
Edge
Electron
IIS Express
Azure Functions
Unity
如果你已经为之前的项目配置好了 launch.json 文件，VScode 甚至可以自动自动选择正确的环境。如果你没有配置过，那么按下“Node.js”后，VScode 会提示你创建“launch.json”文件。
点击“创建 launch.json 文件”，VScode 会在你的工程目录下生成一个“launch.json”文件。
4.2 配置 launch.json 文件
在新建的 launch.json 文件中添加以下配置项：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "TypeScript Debug",
"program": "${workspaceFolder}/src/index.ts",
"outFiles": ["${workspaceFolder}/lib/**/*.js"],
"sourceMaps": true,
"internalConsoleOptions": "openOnSessionStart"
}
]
}
你也可以针对自己的工程做出适当的修改。重要的是，要确保你的配置和工程的位置一致。
type: 配置为 “node”，表示启动 Node.js 环境。
request: 配置为 “launch”，表示启动一个调试工程。
name: 工程的名字，这个名字在选择调试环境的时候可以看到。
program: 工程的入口文件。
outFiles: 编译完成后的文件位置。
sourceMaps: 配置为 true，启用 source maps，这样可以在 VScode 中正确显示调试信息的源代码。
internalConsoleOptions: 配置为 “openOnSessionStart”，表示在启动工程的时候打开内部控制台。
5. 开始调试
完成了以上配置后，你就可以开始调试 TypeScript 工程了。
在 VScode 的 Explorer 面板中选择你的 TypeScript 工程。
在 VScode 的调试面板中选择你刚刚设置的调试配置。
点击“启动调试（Start Debugging）”按钮。
你的工程会在 VScode 中启动，默认会在文件的第一行打上一个断点。
你可以点击“重启”按钮或者“恢复”按钮来继续调试。通过运行“step over”、“step into” 和“step out”来跳过到下一个断点等。
总结
在本文中，我们介绍了如何在 VScode 中调试 TypeScript 代码。为了完成这项任务我们：
安装了 VScode 并在其中安装了 TypeScript 插件
配置了 VScode 正确识别 TypeScript
添加了 launch.json 文件
配置了使用 launch.json 文件进行调试
以上步骤非常重要，尤其是在使用 TypeScript 进行开发时。使用 VScode 进行 TypeScript 调试有很多优点，比如轻松定位问题，可以重现哪些情况下才会出现这个问题，以及可以很快地设置断点并进入简单的调试。我们希望本文能够帮助你更好地调试和开发 TypeScript 工程。