VueSage

基于 MCP (Model-Code-Prompt) 的 Vue 组件代码质量分析服务

快速开始 GitHub

功能特点

智能的 Vue 组件代码质量分析服务

智能代码分析

基于 MCP 的智能分析，提供组件代码质量评分和改进建议。

Cursor 编辑器集成

与 Cursor 编辑器完美集成，支持命令和自然语言交互。

Vue 3 完整支持

全面支持 Vue 3 组件分析，包括 Composition API 和 Options API。

快速部署使用

支持 npx 直接运行，无需安装，配置简单快捷。

快速开始

1. MCP 配置

{
  "mcpServers": {
    "vuesage": {
      "command": "npx",
      "args": [
        "vuesage-mcp@1.1.44"
      ],
      "enabled": true,
      "env": {}
    }
  }
}

2. 使用方式

  • 使用命令：/analyze
  • 或直接输入："分析当前组件"
查看详细文档
🤖

AI 对话演示

分析这个组件的代码质量
🧙‍♂️

正在分析组件...

检查代码结构
分析组件性能
评估最佳实践
🧙‍♂️

分析完成！发现以下问题：

  • • v-for 指令缺少 key 属性
  • • 组件未定义 name 属性
  • • 建议使用 scoped style

需要我帮你自动修复这些问题吗？

是的,请帮我修复
🧙‍♂️

正在应用修复...

添加 v-for key
添加组件 name
添加 scoped 样式

是否需要生成分析报告？

好的,请生成报告
🧙‍♂️

报告已生成！

已在 ./vuesage-reports 目录生成以下报告：

  • • HTML 报告
  • • Markdown 报告
  • • JSON 报告

代码分析

  • • Vue 2/3 语法支持
  • • Composition API 分析
  • • 性能问题检测
  • • 安全漏洞扫描
  • • 代码质量评估

智能修复

  • • 自动代码重构
  • • 性能优化建议
  • • 最佳实践应用
  • • 批量问题修复
  • • 代码格式化

开发体验

  • • AI 对话交互
  • • 实时分析反馈
  • • 自定义规则配置
  • • 团队协作支持
  • • CI/CD 集成