A Local MCP server for finding vue code references using Tree-sitter. Usage: npx mcp-vue [--cwd=<path>] [--level=<DEBUG|INFO|WARN|ERROR>] [--log-file=<path>] [--no-console] [--no-file]
npm install mcp-vuebash
npm install -g mcp-vue
`
或使用 npx(推荐):
`bash
npx mcp-vue
`
使用方法
$3
MCP 服务器通过标准输入/输出进行通信,支持 JSON-RPC 2.0 协议。
`bash
基本使用(使用当前目录作为 cwd)
npx mcp-vue
指定工作目录
npx mcp-vue --cwd=./packages/app
使用绝对路径
npx mcp-vue --cwd=D:/projects/my-project/src
设置日志级别为 DEBUG
npx mcp-vue --level=DEBUG
禁用文件日志
npx mcp-vue --no-file
禁用控制台输出
npx mcp-vue --no-console
组合使用
npx mcp-vue --cwd=./packages/app --level=DEBUG --log-file=custom.log
`
配置选项
MCP 服务器通过命令行参数进行配置,支持以下参数:
| 参数 | 类型 | 描述 | 默认值 |
| ------------------- | -------------- | -------------------------------------- | -------------------- |
| --cwd= | string | 当前工作目录(支持相对路径和绝对路径) | 启动命令的目录 |
| --level= | string | 日志级别 (DEBUG, INFO, WARN, ERROR) | "INFO" |
| --log-file= | string \| null | 日志文件路径,设为 null 禁用文件日志 | "logs/mcp-vue.log" |
| --no-console | flag | 禁用控制台输出 | true(启用) |
| --no-file | flag | 禁用文件输出 | true(启用) |
MCP 工具列表
服务器提供以下工具用于代码分析:
$3
完整解析代码文件并提取所有 AST 信息,返回结构化的代码分析数据。这是主要且推荐的代码分析工具。
参数:
- filepath (string, 必需): 要解析的文件路径(相对于配置的 cwd 或项目根目录)
返回:
返回一个结构化的代码分析对象,根据文件类型返回不同的信息:
$3
- functions: 函数定义(函数声明、箭头函数、方法等)
- functionCalls: 顶层函数调用(如 main、init、fetchData 等)
- classes: 类定义(包括继承、实现接口、方法和属性)
- variables: 变量声明(const、let、var)
- imports: 导入语句
- exports: 导出语句
- types: 类型定义(接口、类型别名、枚举)
$3
- language: 文件语言类型
- imports: 导入语句
- optionsAPI: Options API 信息(当使用 Options API 时返回)
- methods: 方法
- props: 属性
- emits: 事件
- lifecycleHooks: 生命周期钩子
- dataProperties: 数据属性
- computedProperties: 计算属性
- watchProperties: 监听属性
- mixins: 混入
- compositionAPI: Composition API 信息(当使用 Composition API 时返回)
- methods: 方法
- props: 属性
- emits: 事件
- lifecycleHooks: 生命周期钩子
- variables: 变量
- refs: 响应式引用
- reactives: 响应式对象
- computed: 计算属性
- watch: 监听
- watchEffects: 监听效果
- expose: 暴露
- provide: 提供
- inject: 注入
在 Continue 中配置使用
Continue 是一个强大的 AI 编程助手,支持通过 MCP 协议集成自定义工具。以下是如何在 Continue 中配置使用本 MCP 服务器的步骤:
$3
在 Continue 的配置文件中添加 MCP 服务器配置:
`yaml
mcpServers:
- name: Vue/TypeScript Parser
command: npx
args:
- '-y'
- 'mcp-vue'
- '--level=DEBUG'
type: stdio
`
$3
配置完成后,重启 Continue IDE 插件,MCP 服务器将自动启动并可用。
$3
现在你可以在 Continue 中使用以下提示来分析代码:
`
分析 src/components/Header.vue 文件的函数结构,找出所有公共函数及其参数
`
`
检查 src/views/Home.vue 组件的模板,列出所有使用的指令和事件绑定
`
`
提取 src/types/index.ts 文件中的所有类型定义和接口
`
`
分析 src/utils/api.ts 文件的导入依赖关系,找出循环引用
`
注意事项:
- 工具使用 filepath 参数指定要分析的文件路径
- 文件路径是相对于配置的 cwd 或项目根目录的
- 服务器会自动检测文件类型并使用相应的解析器
- 相同文件的重复解析会使用缓存,提高性能
- 返回结果为结构化的代码分析对象,便于 AI 处理和理解
相关链接
- MCP 协议规范
AST 解析限制说明
由于 AST 解析器专注于语法结构分析,不进行语义分析和类型推断,因此存在以下限制:
$3
- 泛型类型参数:无法获取泛型类型参数的具体类型信息,例如 defineProps 无法提取 Props 接口的属性信息
- 类型推断:对于没有显式标注类型的变量和函数返回值,无法推断其类型
- 复杂类型定义:对于复杂的类型别名、条件类型等,可能无法完全解析
$3
- 编译时宏:对于 defineProps()、defineEmits()` 等 Vue 3 的编译时宏,只能获取基本信息,无法获取完整的类型和结构信息