VSCode 使用 ts-node 调试 typescript node的代码

想在vscode中直接在左侧打断点运行及调试ts脚本需要用到ts-node库和vscode的调试及运行工具。

安装依赖

运行ts脚本需要一个库ts-node，这个库要安装在本项目，不能全局安装，否则会报错。

yarn add ts-node-D 
# 或者
npm i ts-node -D
# 或者
pnpm i ts-node -D

添加launch.js配置

安装好之后，通过vscode的调试及运行工（在侧边栏），在目标项目添加launch.json配置，可以选择TS Debug，自动生成相关配置

选择后生成以下配置

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: <https://go.microsoft.com/fwlink/?linkid=830387>
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ts-node",
      "type": "node",
      "request": "launch",
      "args": [
        "${relativeFile}" // ${relativeFile} 是表示当前打开的文件
      ],
      "runtimeArgs": [
        "-r",
        "ts-node/register"
      ],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "internalConsoleOptions": "openOnSessionStart"
    },
    // 可添加多个配置
    {
      "name": "ts-node2",
      "type": "node",
      "request": "launch",
      "args": [
        "${relativeFile}" // ${relativeFile} 是表示当前打开的文件
      ],
      "runtimeArgs": [
        "-r",
        "ts-node/register"
      ],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
}

可以添加多个debugger配置，然后在选择想要使用的配置。
然后就可以F5或者点击左上角的绿色三角箭头开心debugger啦~

使用 esm 模块化

想要使用import/exportesm模块语法则需要以下配置

• 在package.json添加”type”: “module”配置
• 在launch.json中添加运行时 loader ts-node/esm

  {
  	"runtimeArgs": [
  		"--loader",
  		"ts-node/esm",
  	  "-r",
  	  "ts-node/register"
  	],
  }
  

然后就可以啦~