vscode 如何在浏览器运行ts项目并在编辑器上进行断点调试

要在浏览器中运行 TypeScript 项目并在 VSCode 编辑器上进行断点调试，需要执行以下步骤：

1. 安装 `ts-node` 和 `nodemon` 依赖项，可以使用以下命令：

npm install ts-node nodemon -g

2. 打开 VSCode 编辑器，并打开 TypeScript 项目所在的文件夹。
3. 在 VSCode 中打开项目的 `launch.json` 文件，并添加以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "name": "TS Debug",
      "request": "launch",
      "runtimeExecutable": "nodemon",
      "program": "${workspaceFolder}/app.ts",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ],
      "env": {
        "NODE_ENV": "development"
      },
      "sourceMaps": true,
      "protocol": "inspector",
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}

其中，`program` 指定了 TypeScript 文件的路径，`outFiles` 指定了编译后的 JavaScript 文件的路径，`sourceMaps` 启用了源代码映射功能，`skipFiles` 配置了不需要调试的文件。

4. 在 VSCode 终端中使用以下命令编译 TypeScript 代码，并启动调试：

npm run dev

其中，`npm run dev` 是在 `package.json` 文件中配置的脚本命令，可以根据需要进行修改。

5. 调试启动后，在 VSCode 编辑器中打开浏览器，访问 `http://localhost:3000`，即可在浏览器中运行 TypeScript 项目，并在 VSCode 编辑器上进行断点调试。