🚀🚀🚀 告别复制粘贴,这个高效的 Vite 插件让我摸鱼🐟时间更充足了!

前言

最近我开发了 vite-plugin-swagger-mcp 插件,可以通过精确投喂 Swagger 数据给大模型,生成准确的请求函数、参数和返回值类型。它避免了上下文过长导致的幻觉问题,让开发更高效!

仓库地址:github.com/mmdctjj/vit...

往期精彩推荐

正文

在日常前端开发中,Swagger 文档虽详尽,但实际使用时存在这些问题:

  1. 手动复制繁琐:需要从 Swagger 复制路径、参数、请求体和响应类型到代码中,添加 Axios/Fetch 函数和 TypeScript 类型。重复操作易出错,尤其在接口众多时。
  2. 大模型辅助的限制:想用 Vscode 或 Trae 生成代码时,因提示词长度限制,需多次复制接口细节,效率低下。
  3. 全文档投喂的幻觉:直接将 Swagger JSON 文件传给大模型,上下文过长(数千行),易产生幻觉:参数类型错乱、函数生成不准,甚至忽略边缘情况。

痛定思痛,我开发了 vite-plugin-swagger-mcp 这个插件,

插件通过生成 MCP 服务器,让大模型按需访问 Swagger 数据,实现精确投喂:

插件启动后,在编辑器里添加 MCP 服务,

json 复制代码
{
  "mcpServers": {
    "swagger": {
      "url": "http://localhost:5173/_mcp/sse/swagger"
    }
  }
}

之后就可以使用大模型直接查询:"生成 /xxx 接口的 GET 请求函数和类型",插件会投喂精确数据,生成准确代码。

即使同时生成一个模块下所有接口,都可以做到精确、无幻觉。

如何使用

  1. 安装
csharp 复制代码
pnpm add vite-plugin-swagger-mcp -D
  1. 配置

在 vite.config.ts 中添加插件,如下。

示例配置(vite.config.ts)

javascript 复制代码
import { defineConfig } from 'vite';
import swaggerMcp from 'vite-plugin-swagger-mcp';

export default defineConfig({
  plugins: [
    swaggerMcp({
      swaggerUrl: 'http://ip:port/path/v2/api-docs',
      token: 'xxxx', // 可选 Bearer Token
    }),
  ],
});
  1. 启动
arduino 复制代码
npm run dev

启动成功后可以在日志里看到具体的地址:

MCP server connected: http://localhost:5173/_mcp/sse/swagger

css 复制代码
xxxx@0.0.0 dev
vite

MCP server connected: http://localhost:5173/_mcp/sse/swagger

  VITE v7.0.4  ready in 470 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

然后取对应的编辑器添加 MCP 工具即可!

详细用法见 github.com/mmdctjj/vit...

另外,大家不用担心对生产环境有影响,因为只使用了 Vite 插件的 configureServer 函数,仅开发时生效!

最后

这个插件解决了使用 Swagger 文档生成接口和类型的种种痛点,通过精确投喂让大模型生成更准确的接口代码。同时也让自己有更多的时间做有意义的事了!

快来试试这个插件,为自己赢取更多的摸鱼时间吧!

今天的分享就这些了,感谢大家的阅读!如果文章中存在错误的地方欢迎指正!

往期精彩推荐

相关推荐
哟哟耶耶1 小时前
Starting again-02
开发语言·前端·javascript
Apifox.1 小时前
Apifox 9 月更新| AI 生成接口测试用例、在线文档调试能力全面升级、内置更多 HTTP 状态码、支持将目录转换为模块
前端·人工智能·后端·http·ai·测试用例·postman
Kitasan Burakku2 小时前
Typescript return type
前端·javascript·typescript
叁佰万2 小时前
前端实战开发(一):从参数优化到布局通信的全流程解决方案
前端
笔尖的记忆2 小时前
js异步任务你都知道了吗?
前端·面试
光影少年2 小时前
react生态
前端·react.js·前端框架
golang学习记2 小时前
从0死磕全栈之Next.js 中的错误处理机制详解(App Router)
前端
力Mer2 小时前
console.log()控制台异步打印与对象展开后不一致问题
前端·javascript
WillaWang3 小时前
Liquid:在assign定义变量时使用allow_false
前端
2401_831501733 小时前
Python学习之Day05学习(定制数据对象,面向对象)
前端·python·学习