功能简介
笔者所在的公司为了开发提效，因此实现了通过vscode插件预览接口文档 及一键生成请求代码 ，及ts interface代码。
效果展示
先给大家看看效果
- 右侧小地球图标为面板入口，点击后我们可以看到树形接口文档列表
- 点击某个具体的文档，我们能在主面板看到接口文档信息。
- 右键该文档我们也能出现选项面板，当点击to axios时，便一键生成了我们项目所需的请求代码及interface代码
插件使用
如果大家想使用该插件，可以在vsode商店直接搜索 doc2http
使用步骤也很简单，如下所示
- 通过
ctrl + shift + p呼出vscode命令面板, 输入doc2http:Config来生成初始配置， 来告诉该插件如何去获取后端接口数据。（目前仅支持apifox）
- 当配置生成好后，我们就能在vscode左侧活动栏位置看到小地球进行使用了
该插件的一键生成可以分为两种情况，下面简单介绍下
- 生成请求文件：文件的路径及命名及路径都同接口文档，只不过命名是取得拼音。
- apifox.ts 存放请求相关代码
- interface 存放类型声明相关
- 代码生成规则：目前是根据模板来生成代码，分为两部分，一部分是头部import导入，一部分是导出得请求方法。如下所示
ts
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-trailing-spaces */
/* eslint-disable no-irregular-whitespace */
/* eslint-disable vue/no-irregular-whitespace */
/* eslint-disable sort-imports */
import qs from 'qs'
import type { IConfig } from '@galaxy/swrv'
import type { AxiosRequestConfig } from 'axios'
import http from '../../../http'
import { useMutation, useSWRGet } from '../../../swrv'
import { GetUcRoleListQuery, GetUcRoleListRes } from './interface'
// 分界线==========================头部导入上面代码，方法导出下面代码
/** axios 角色列表 */
export function GetUcRoleList(
params: GetUcRoleListQuery,
axiosConfig: AxiosRequestConfig = {},
): Promise<GetUcRoleListRes> {
return http.get('/uc/role/list', {
params,
...axiosConfig,
})
}由于公司请求写法相对固定，便写死了模板类型，笔者也在将一些功能重构中，准备做成配置的形式，方便各种不同的应用场景，以及一些体验问题的改善。如果大家感兴趣，也可以直接拿源码二次改造或者提pr来共建。
如果大家现在想使用该插件，则需要做添加冗余代码来兼容头部import，防止打包报错
- 提供@galaxy/swrv 与 swrv 文件 来兼容 此头部
import import type { IConfig } from '@galaxy/swrv' 及 import { useMutation, useSWRGet } from '../../../swrv'