如何在VS Code中调试我的typegraphql解析器？

在Visual Studio Code (VS Code) 中调试 TypeGraphQL 解析器可以帮助你更好地理解代码的执行流程，快速定位和修复问题。以下是如何在 VS Code 中设置和调试 TypeGraphQL 解析器的详细步骤：

1. 安装必要的扩展

首先，确保你已经安装了以下 VS Code 扩展：

Debugger for Chrome 或 Debugger for Firefox（如果你在浏览器中调试前端代码）
ESLint（用于代码质量检查）
Prettier - Code formatter（用于代码格式化）

2. 配置 TypeScript 编译

确保你的项目已经配置了 TypeScript 编译器。你需要一个 tsconfig.json 文件来配置 TypeScript 编译选项。以下是一个基本的 tsconfig.json 示例：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

3. 配置 VS Code 调试

在 VS Code 中，你需要创建一个调试配置文件 launch.json。你可以通过以下步骤创建：

打开 VS Code 命令面板（按 Ctrl+Shift+P 或 Cmd+Shift+P）。
输入并选择 Debug: Open launch.json。
选择 Node.js 环境。

以下是一个示例 launch.json 配置，用于调试 TypeGraphQL 解析器：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

4. 配置任务运行 TypeScript 编译

你需要配置一个任务来编译 TypeScript 代码。创建或编辑 .vscode/tasks.json 文件：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "tsc: build - tsconfig.json",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"]
    }
  ]
}

5. 设置断点

在你的 TypeGraphQL 解析器代码中设置断点。你可以在代码行号左侧点击，设置一个红色的断点。

6. 启动调试

打开调试面板（按 Ctrl+Shift+D 或 Cmd+Shift+D）。
选择你在 launch.json 中配置的调试配置（例如 "Launch Program"）。
点击绿色的播放按钮（或按 F5）启动调试。

7. 调试 TypeGraphQL 解析器

当你的 TypeGraphQL 服务器启动并运行时，VS Code 会在你设置的断点处暂停执行。你可以使用调试面板中的工具来：

查看变量：在调试面板中查看当前作用域中的变量。
单步执行：逐行执行代码（使用 F10 进行单步跳过，使用 F11 进行单步进入）。
继续执行：继续执行代码直到下一个断点（使用 F5）。

示例 TypeGraphQL 解析器代码

以下是一个简单的 TypeGraphQL 解析器示例：

import "reflect-metadata";
import { Resolver, Query, Arg, Int, buildSchema } from "type-graphql";
import { ApolloServer } from "apollo-server";

@Resolver()
class SampleResolver {
  @Query(() => String)
  hello(): string {
    return "Hello, world!";
  }

  @Query(() => Int)
  add(@Arg("a", () => Int) a: number, @Arg("b", () => Int) b: number): number {
    return a + b;
  }
}

async function bootstrap() {
  const schema = await buildSchema({
    resolvers: [SampleResolver],
  });

  const server = new ApolloServer({ schema });

  server.listen({ port: 4000 }, () =>
    console.log("Server is running on http://localhost:4000")
  );
}

bootstrap();

在这个示例中，你可以在 hello 或 add 方法中设置断点，然后启动调试。