如何为Shopify NextJs TypeScript模板配置launch.json？

针对你的Shopify+Next.js模板项目，以下是两种适配场景的正确launch.json配置方案，替换你当前的默认配置即可：

场景1：使用Next.js官方dev命令（package.json中dev脚本为next dev） #

如果你的yarn dev实际执行的是Next.js自带的开发命令，用这个配置直接启动调试：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: Dev",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "yarn",
      "args": ["dev"],
      "env": {
        "NODE_OPTIONS": "--inspect"
      },
      "skipFiles": ["<node_internals>/**"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

• runtimeExecutable指定用yarn启动命令，若使用npm可改为"npm"
• env中的--inspect让Node.js开启调试端口，VS Code会自动连接
• console设为集成终端，输出逻辑和手动执行yarn dev一致

场景2：使用自定义Node.js服务（package.json中dev脚本指向server/index.ts） #

如果项目依赖自定义TypeScript服务入口，用这个配置直接调试TS文件：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Custom Server",
      "type": "node",
      "request": "launch",
      "runtimeArgs": ["--inspect", "-r", "ts-node/register"],
      "args": ["${workspaceFolder}/server/index.ts"],
      "skipFiles": ["<node_internals>/**"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

• runtimeArgs中的ts-node/register用于直接运行TypeScript文件，无需提前编译
• --inspect开启调试端口，确保VS Code能捕获断点

使用步骤 #

1. 关闭当前正在运行的yarn dev进程
2. 在VS Code「运行和调试」面板中选择对应配置项
3. 点击启动按钮，自动启动开发服务并附加调试器，断点会正常触发

内容的提问来源于stack exchange，提问作者egillanton