如何将VSCode调试TypeScript代码改为长尾？

本文共计1054个文字，预计阅读时间需要5分钟。

要在VSCode中调试TypeScript，您需要配置调试环境。以下是一个简化的步骤：

1. 安装Node.js和npm：确保您的系统中已安装Node.js和npm，因为TypeScript依赖于它们。

2.安装TypeScript：使用npm安装TypeScript编译器。

bash npm install -g typescript

3.创建TypeScript项目：创建一个新的TypeScript文件。

4.配置VSCode：

- 打开VSCode。 - 安装`TypeScript`扩展。 - 打开或创建一个`.ts`文件。 - 点击左下角的运行和调试（Run and Debug）图标。 - 选择添加配置（Add Configuration）。 - 在弹出的窗口中，选择Node.js。 - 点击新建文件（New File）。 - 在新配置文件中，填写以下内容：

json { version: 0.2.0, configurations: [ { type: node, request: launch, name: Launch Program, program: ${workspaceFolder}/src/index.ts, skipFiles: [/**], outDir: ${workspaceFolder}/dist } ] }

- 保存配置文件。

5. 启动调试：在VSCode中，按下`F5`或点击开始调试（Start Debugging）按钮。

这样，您就可以在VSCode中调试TypeScript代码了。

vscode怎么调试ts？

vscode 调试 TypeScript

环境

typescript :2.5.2

vscode:1.16.0

vscode 直接调试 ts 文件

源码:github

（github.com/meteor199/my-demo/tree/master/typescript/vscode-debug）

安装 typescript 依赖

npm install typescript --save-dev

添加 tsconfig.json

主要是将 sourceMap 设置为true。

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

配置自动编译

利用 vscode 的 tasks 自动将 ts 编译为 js。也可以使用别的方式编译，如:gulp,webpack 等。

添加文件: /.vscode/tasks.json

{ // See go.microsoft.com/fwlink/?LinkId=733558 // for thedocumentation about the tasks.json format "version": "0.1.0", "command": "tsc", "isShellCommand": true, //-p 指定目录；-w watch,检测文件改变自动编译 "args": ["-p", ".","-w"], "showOutput": "always", "problemMatcher": "$tsc" }

使用快捷键 Ctrl + Shift + B 开启自动编译。

配置调试

调试时，需要配置 vscode 的 launch.json 文件。这个文件记录启动选项。

添加或编辑文件 /.vscode/launch.json。

{ "version": "0.2.0", "configurations": [ { "name": "launch", "type": "node", "request": "launch", "program": "${workspaceRoot}/dist/main.js", "args": [], "cwd": "${workspaceRoot}", "protocol": "inspector" } ] }

注意 : program 需设置为你要调试的 ts 生成的对应的 js。

假如需要调试 /src/main.ts,则此处为 ${workspaceRoot}/dist/main.js。

调试

打开 main.ts，在左侧添加断点，进行调试。

使用 ts-node 调试 ts 文件

源码:github（github.com/meteor199/my-demo/tree/master/typescript/vscode-debug-without-compiling）

来自:Debugging TypeScript in VS Code without compiling, using ts-node

ts-node 调试 ts 文件时，不会显式生成 js。假如你不想编译为 js 后 再调试，可以考虑这种方式。

安装 npm 依赖包

npm install typescript --save-dev npm install ts-node --save-dev

配置 tsconfig.json

主要是将 sourceMap 设置为true。

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

配置 launch.json

打开 DEBUG 界面，添加 配置

或者编辑 /.vscode/launch.json。

{ "version": "0.2.0", "configurations": [ { "name": "Current TS File", "type": "node", "request": "launch", "program": "${workspaceRoot}/node_modules/ts-node/dist/_bin.js", "args": [ "${relativeFile}" ], "cwd": "${workspaceRoot}", "protocol": "inspector" } ] }

调试

打开要调试的 ts 文件，添加debugger。

打开 debug 界面。

在DEBUG后 选择 launch.json 中对应的配置，此处为Current TS File。

点击运行按键或者按 F5 运行。

相关教程推荐：vscode教程

以上就是vscode怎么调试ts的详细内容，更多请关注自由互联其它相关文章！