🚀🚀🚀 告别复制粘贴,这个高效的 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 文档生成接口和类型的种种痛点,通过精确投喂让大模型生成更准确的接口代码。同时也让自己有更多的时间做有意义的事了!

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

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

往期精彩推荐

相关推荐
云枫晖10 小时前
Webpack系列-Loader
前端·webpack
aggression10 小时前
代码敲击乐:让你了解前端的动静结合和移动端的适配性
前端
yinuo10 小时前
深入理解与实战 Git Submodule
前端
骑自行车的码农10 小时前
React 事件收集函数
前端·react.js
一个处女座的程序猿O(∩_∩)O10 小时前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js
小蜜蜂dry10 小时前
JavaScript 原型
前端·javascript
用户904438163246010 小时前
前端也能玩 AI?用 brain.js 在浏览器里训个 "前后端分类大师",后端同事看了都沉默!
前端
祈祷苍天赐我java之术10 小时前
什么是Nginx?:掌握高性能 Web 服务器核心技术
服务器·前端·nginx
Achieve前端实验室10 小时前
【每日一面】async/await 的原理
前端·javascript·面试
姜至11 小时前
el-calendar实现自定义展示效果
前端·vue.js