Frontend Code Review MCP

一个用于前端代码审查的 MCP (Model Context Protocol) 服务器，支持 React、Vue 等主流框架的代码质量检查。

✨ 功能特性

• 🔍 多框架支持: React、Vue、Angular、Svelte 及原生 JavaScript
• 🛡️ 安全检查: XSS 防护、敏感信息泄露检测
• ⚡ 性能审查: 内存泄漏、渲染性能、打包体积分析
• ♿ 可访问性: WCAG 2.1 标准合规检查
• 🎯 React Hooks: 深度检查 Hooks 使用规范
• 🌿 Vue Composition API: Vue 3 Composition API 最佳实践
• 🔗 Git 集成: 支持 GitLab 和 GitHub MR/PR 评论

🚀 快速开始（用户使用）

无需安装！ 只需在 MCP 配置中添加即可使用：

Cursor 配置

在项目根目录创建 .cursor/mcp.json：

{
  "mcpServers": {
    "frontend-code-review": {
      "command": "npx",
      "args": ["-y", "@anthropic/frontend-code-review-mcp"],
      "env": {
        "GITLAB_TOKEN": "your-gitlab-token",
        "GITLAB_HOST": "gitlab.com"
      }
    }
  }
}

Claude Desktop 配置

编辑 ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) 或 %APPDATA%\Claude\claude_desktop_config.json (Windows)：

{
  "mcpServers": {
    "frontend-code-review": {
      "command": "npx",
      "args": ["-y", "@anthropic/frontend-code-review-mcp"],
      "env": {
        "GITLAB_TOKEN": "your-gitlab-token",
        "GITHUB_TOKEN": "your-github-token"
      }
    }
  }
}

配置完成后重启 Cursor 或 Claude Desktop 即可使用！

📦 开发者安装

如果你想修改或贡献代码：

git clone https://github.com/your-username/frontend-code-review-mcp.git
cd frontend-code-review-mcp
npm install
npm run build

🔧 环境变量配置

在 MCP 配置的 env 部分添加以下变量：

| 变量名 | 必填 | 说明 | |--------|------|------| | GITLAB_TOKEN | 否 | GitLab Personal Access Token（用于 MR 集成） | | GITLAB_HOST | 否 | GitLab 域名，默认 gitlab.com | | GITHUB_TOKEN | 否 | GitHub Personal Access Token（用于 PR 集成） |

获取 Token

GitLab Token:

1. 访问 GitLab → Settings → Access Tokens
2. 创建 token，勾选 api 和 read_repository 权限

GitHub Token:

1. 访问 GitHub → Settings → Developer settings → Personal access tokens
2. 创建 token，勾选 repo 权限

🛠️ 可用工具

代码审查

| 工具名 | 描述 | |--------|------| | review_frontend_code | 对前端代码进行全面审查 | | review_react_hooks | React Hooks 专项审查 | | review_vue_composition | Vue 3 Composition API 审查 | | check_accessibility | WCAG 可访问性检查 | | check_security | 前端安全检查 | | analyze_bundle_impact | 分析打包体积影响 |

Git 集成

| 工具名 | 描述 | |--------|------| | get_merge_request_diff | 获取 MR/PR 代码差异 | | get_mr_changed_files | 获取变更文件列表 | | post_review_comments | 发布审查评论到 MR/PR |

配置管理

| 工具名 | 描述 | |--------|------| | get_review_rules | 获取当前审查规则 | | set_custom_rules | 设置自定义规则 | | generate_review_summary | 生成审查报告 |

📋 审查类别

• security: 安全问题 (XSS, 敏感信息等)
• performance: 性能问题 (内存泄漏, 重渲染等)
• accessibility: 可访问性 (WCAG 合规)
• best-practices: 最佳实践
• code-quality: 代码质量
• hooks: React Hooks 规范
• state-management: 状态管理
• typescript: TypeScript 类型

📝 使用示例

审查代码文件

使用 review_frontend_code 工具审查这段 React 代码：

[粘贴代码]

审查 MR/PR

获取这个 MR 的代码变更并进行审查：
https://gitlab.com/group/project/-/merge_requests/123

生成审查报告

将审查结果生成 Markdown 格式的报告

🎯 审查规则示例

React 规则

• react/hooks-rules: Hooks 调用规范
• react/use-effect-async: useEffect async 检查
• react/key-prop: 列表渲染 key 检查
• react/dangerous-html: XSS 风险检查

Vue 规则

• vue/v-html: v-html XSS 风险
• vue/v-for-key: v-for key 检查
• vue/reactive-destructure: 响应式解构检查
• vue/computed-side-effect: computed 副作用检查

通用规则

• common/console-log: console.log 检查
• common/any-type: TypeScript any 类型检查
• sec/eval: eval 安全检查
• perf/memory-leak-listener: 内存泄漏检查
• a11y/img-alt: 图片 alt 属性检查

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 License

MIT