这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

前文使用篇里梳理了 Github Profile Readme 的现有玩法。还在文末留下不长的 “创作” 清单，那么今天就操练起来吧，回顾一下预定的工作目标：

在 github-readme-stats 项目的基础上实现一个 Leetcode 统计卡片
尝试搭建一个更易扩展的 SVG 生成系统，探索能否直接应用已有的图表组件。
造一个 Profile Readme 可视化生成器

实际工作量比我预计的要大，只好分多天完成了。这一篇文章记录实现 LeetCode 统计卡片的过程。

开发目标：在 github-readme-stats 项目上实现一个 leetcode 统计卡片

涉及技术：GraphQL、TypeScript、SVG 编程

创建文件

github-readme-stats 依托 vercel 运行，内部核心逻辑其实非常简单：请求触发 serverless function -> fetcher 获取数据 -> card 负责数据处理和 svg 构建。

项目中的几张卡片几乎都是复制粘贴的重复代码，先不考虑优化，照猫画虎复制出 api、fetcher、card 三份文件。

请求 Leetcode 数据

Leetcode 没有开放 API，只能通过调试工具慢慢找请求接口。选一个数据充足的用户页，比如 leetcode-cn.com/u/int65536/ ，刷新，在 Network 面板里一个个排查。Leetcode 用了 GraphQL 查询数据，筛选 graphql 路径缩小范围，仔细看看，不一会儿就能确定每个请求的用途。

我也要用 GraphQL 组装数据。那么问题来了：怎么复制 Request Payload？有没有类似 Postman 的 API 调试工具？

复制 Request Payload

Chrome Devtool 里用快捷键复制 Request Payload 得到的是大段字符串，真正的获取方法是「单击选中复制目标，右键选择 Copy value」。

Screen Shot 2021-08-05 at 10.47.02 AM.png

GraphQL 调试工具

下载一个 GraphiQL 客户端 – GraphiQL | Apps | Electron (electronjs.org)，graphiql-app 是多年前的一个开源项目，有些小 Bug 但暂时够用。

Screen Shot 2021-08-05 at 10.57.31 AM.png

Leetcode 的国内和国际站点用了两套完全不同的请求，schema 结构也完全不同。只能做两套逻辑，处理后返回统一的数据结构。没有 TypeScript 和 ESLint 辅助，写起代码来确实低效，在编码阶段很难预知错误。只能通过运行 -> 检查错误信息 -> Debug 的方式排查。

Vercel Debug

重复代码 + 没有语法检查 + 没有类型检查。如果没有 Debugger，只靠 console，那这开发简直是太难受了。

Vercel 本地开发环境通过 vercel dev 跑起，在 VSCode 中启动 Node.js 有好几种方式：

开启 Auto Attach
使用 JavaScript Debug Terminal 在指定终端窗口执行 vercel dev
配一个简单的 launch.json

我期望能在这个项目中运行 vercel dev 时启动调试。于是只为这个工作区配了 Auto Attach

// 设置 .vscode/settings.json
{
    "debug.javascript.autoAttachFilter": "smart", // 能匹配上 AttachSmartPattern 的命令行脚本自动启动调试器
    "debug.javascript.autoAttachSmartPattern": [ // 指定 AttachSmartPattern 
        "**/vercel/**"
    ]
}
复制代码

如果有兴趣全面了解 VSCode 中启动 Node.js 调试，可以看这篇 VSCode 启动 Node.js 调试的几种方式 (juejin.cn)

重构代码

解决完这一部分，发现目前的开发辅助和代码结构实在不行，效率太低并且可能有未发现的错误。我忍不了了，于是决定重构。

TypeScript

由于对 TS 的掌握还不全面，更别说熟练应用了。可以说是一个新手一边实践一边躺坑的过程，躺坑的过程有点狼狈，但也是一种学习方法。

支持 TypeScript

先看看 Vercel 对 TypeScript 的支持情况：

Deploying a Node.js function with the .ts extension will automatically be recognized as a TypeScript file and compiled to a Serverless Function.

You can also define a tsconfig.json to configure the Vercel TypeScript compiler.

Vercel 内置 TypeScript 编译支持，能保证 TS 代码正常工作。同时，tsconfig.json 对 Vercel TypeScript 编译器有效。

TS 的支持一部分是编译支持，另一部分是 IDE 辅助（错误提醒、编码建议和修正、智能补全、跳转等等）。我所好奇的是没有 tsconfig.json，VSCode TypeScript 语言服务是怎么和 Vercel 默认的 TS 配置保持同步的呢？