开发一个VSCode插件：自动生成typescript接口代码

业务背景

在前后端联调过程中，前后端字段的准确描述和转化成前端 TypeScript 类型描述是一项费时费力且繁琐的任务。为了解决这个问题，我们开发了一个VSCode插件，它可以根据后端生成的 Open API 格式的 JSON 文件准确地生成对应的 TypeScript 接口调用代码和相应的输入输出参数类型描述。下面是该插件的运行截图：

本插件已经发布到vscode应用市场，欢迎试用。
完整代码地址已附到末尾。

功能拆解

• 将对应项目目录下的以 .swagger.json 或者 .api.json 文件解析为JSON格式api数据源，并且做到监听改动并更新api数据源
• 检测用户输入，当输入制定的提示词开启提示，根据用户输入的url查到对应的api
• 将api转化成代码，并插入到当前文档中

功能实现简要说明

代码模版生成

VSCode已经有非常方便的交手架供我们生成样板代码，按照操作一步步生成即可

npx --package yo --package generator-code -- yo code

解析Open API JSON

参考Open API 文件规范。非常幸运，已经有开源项目openapi-typescript-codegen帮我们解析文件。源码非常清晰易懂。由于我们需要定制化模版输出，选择将整个文件拷贝到工程里面以供修改。关键的解析代码入口如下：
openapi-typescript-codegen/src/oepnApi/v3/parser
openapi-typescript-codegen/src/oepnApi/v2/parser
通过这两个函数将对应工程目录下的open API文件解析成JSON，并以工程根目录为key，作为value存起来，大概的数据接口类型如下

const allApiDataCollection = { [key:string]: OpenAPI[] }

并且不要忘记了当对应的open API文件有更新也要记得重新解析，下面的VSCode API可以方便地监听对应类型文件的变更，并执行相应回调。

vscode.workspace.createFileSystemWatcher('*.{swagger.json|api.json}', callback)

提示词触发，并查找相关的api数据

当用户当前文档格式为ts｜tsx, 监听用户输入，当用户触发提示词，执行搜索。取到当前文件的对应的工程目录，在之前的allApiDataCollection的对应数据里面搜索。

const prefix = '//$'
vscode.languages.registerInlineCompletionItemProvider({
    pattern: '**/*.{ts,tsx}'
}, {
    async provideInlineCompletionItems(document: vscode.TextDocument, position: vscode.Position) {
        const lineText = document.lineAt(position).text.trim();
        if (lineText.startsWith(prefix) && lineText !== prefix) {
            // 触发搜索
            // 取当前文件的对应工程目录用以约束搜索范围
            const targetProjectPath = vscode.workspace.getWorkspaceFolder(document.uri)?.uri.fsPath
        }
    }
})

根据搜索结果调用vscode.InlineCompletionItem产生提示，并响应用户操作插入代码

生成代码插入文档

openapi-typescript-codegen采用handlebars模版将api JSON data转化成对应代码。直接使用下面的api插入生成好的代码

editor.edit(editBuilder => {
    editBuilder.insert(insertPosition, codeToInsert);
});

发布插件

• 选上一个满意的LOGO，在package.json里面配置好，并写一个通俗易懂的ReadME描述一下插件的作用和用法。
• 安装插件打包工具npm install -g @vscode/vsce，然后执行vsce package。
• 在vscode marketplace上注册好账号。创建好publisher。并将package.json里面的publish.id更新一致。手动上传发布。

后续改进项

• 方便地更新生成的open api代码
• 支持修改生成的api的样板代码

完整代码地址：
https://github.com/NearImba/paimon
如果觉得有帮助，求star，感谢支持