VSCode如何调试TS + node项目

本文介绍了如何在Visual Studio Code(VsCode)中配置Node.js的调试环境,通过创建launch.json文件,设置运行参数和环境变量,使得能够一键启动并调试index.ts文件。调试配置包括了使用ts-node注册模块和-inspect选项,确保在开发模式下运行。

在VsCode的项目.vscode目录下新建文件launch.json

内容如下:

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "server",
      "args": ["${workspaceRoot}/index.ts"],
      "runtimeArgs": ["-r", "ts-node/register", "--inspect"],
      "cwd": "${workspaceFolder}",
      "protocol": "inspector",
      "internalConsoleOptions": "openOnSessionStart",
      "env": {
        "NODE_ENV": "development"
      }
    },
  ]
}

然后点击调试即可在这里插入图片描述
注意:

  1. "args": ["${workspaceRoot}/index.ts"], 此处为人口文件,需要根据项目进行调整
### 安装 `ts-node` 并配置 VSCode 为了在 Visual Studio Code (VSCode) 中使用 TypeScript 运行 Node.js 应用程序,可以通过安装 `ts-node` 来实现这一点。以下是详细的指南: #### 使用 npm 安装 ts-node 通过命令行工具执行以下操作来全局安装 `ts-node` 和 TypeScript 编译器: ```bash npm install -g ts-node typescript ``` 这会使得 `ts-node` 可以在整个计算机上访问。 #### 配置 VSCode 支持 TypeScript 调试 为了让调试更加方便,在项目根目录下创建或修改 `.vscode/launch.json` 文件,加入如下配置片段用于支持直接运行和调试 TypeScript 文件: ```json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program with ts-node", "runtimeExecutable": "ts-node", "args" : ["${workspaceFolder}/src/index.ts"] } ] } ``` 上述 JSON 片段中的 `"runtimeExecutable"` 字段指定了启动应用程序时使用的可执行文件为 `ts-node`,而 `"args"` 则指向要执行的入口脚本位置[^1]。 #### 设置工作区特定的语言特性 如果希望进一步优化开发体验,可以在项目的根目录下的 `.vscode/settings.json` 添加针对 TypeScript 的编辑器偏好设置: ```json { "[typescript]": { "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports": true }, "editor.suggest.snippetsPreventQuickSuggestions": false } } ``` 这些配置项能够增强编写 TypeScript 代码时的便利性和效率[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值