CodeJoy VSCode 扩展

CodeJoy VSCode 扩展是一个为开发者提供 AI Coding 增强、项目管理、部署和工作流功能的 Visual Studio Code 插件。通过简洁直观的界面，帮助您更高效地使用 AI 编码和管理部署项目。

核心功能

🚀 一键配置 AI Coding Rule 和 MCP

CodeJoy 插件可以通过分析你的项目，自动为你准备最佳的 CatPaw/Cursor Rule 和 MCP 配置，显著提升 AI 编码效果。

什么是 AI Coding Rule？

如果你对 AI 编码规范没有约束，它可能不遵循团队的 Coding 规范带来糟糕的代码。Rule 正是解决这个问题，我们通过调研、实践，总结出了前端开发主要技术栈的最佳 Rule（React/Vue/MRN/Max），现在你可以通过 CodeJoy 插件一键应用到你的仓库中，对出码效果提升显著。

什么是 MCP？

MCP (Model Context Protocol) 让 AI 能够访问外部工具和数据源。CodeJoy 内置了公司主要前端 MCP 的一键配置，包括：

• MTD 组件：美团设计系统组件库
• Roo 组件：Roo 组件库
• Max 组件：Max 组件库
• 印迹：视觉稿工具
• ELink 等

插件会分析你的仓库，自动匹配最佳 MCP。

快速开始

1. 选择最佳 Coding 模型

在前端 Coding 任务中，推荐使用 claude-sonnet-4 或 claude-sonnet-4-thinking，好的模型对生码效果提升非常显著！

2. 一键配置 Rule 和 MCP

1. 安装后，点击侧边栏的 CodeJoy 图标
2. 点击 "配置 Rule 和 MCP" 按钮
3. 插件会自动检测你的仓库，并推荐最相关的 Rule 和 MCP
4. 确认后点击 "应用配置" 即可完成 AI Coding Context 配置

3. 确认 MCP 已启用

配置生成后，需要确认 MCP 已正确启动：

CatPaw 用户：

1. 在 MCP 列表页点击 "添加 MCP Server"
2. 进入编辑 JSON 文件的界面，手动触发一下保存
3. 返回 MCP 列表，确认 MCP 状态为绿色（表示已启动）

如果启动失败：

• 确保使用 Node.js 18+ 版本（更新后需重启 IDE）
• 查看 MCP 日志：打开命令面板 → 输入 "MCP Log(s)"

4. 开始使用 AI Coding

配置好 Rule / MCP 后，就可以开始给 AI 布置任务了！

提词技巧

好的提示词能让你事半功倍，以下是一些最佳实践：

1. 选择最佳模型：使用 Claude 4 Sonnet 系列，关闭 auto mode，手动选择最佳模型
2. 管理对话上下文：太长的对话会影响模型指令遵循能力，建议每个新任务开启新对话窗口
3. 清晰、完整的描述：把模型当成不熟悉需求的同事，善用 @file 功能提供必要信息
4. 让模型做它擅长的事：模型更擅长目标清晰、难度中等的工作，复杂任务需要人来拆解

视觉还原提升技巧（移动端场景）

CodeJoy 插件对移动端场景下 AI Coding 视觉还原效果做了优化。

前置配置：

1. 配置印迹 MCP 和 max-doc MCP
2. 应用配置后会自动在仓库里生成视觉稿 rules（.cursor/rules/codejoy/ingee.md 或 .catpaw/rules/codejoy/ingee.md）

使用时需要提供：

1. 印迹视觉稿的 URL 或视觉稿 ID（记得 unlink URL，避免被识别为 HTML）
2. 视觉稿截图（推荐直接从印迹导出，而非手动截图）
3. 通过 @rules 或拖拽方式，将生成的 ingee.md 添加到对话中
4. 简单的需求描述，如："帮我看看这个印迹视觉稿和页面截图，尽可能还原这个移动端页面"

生成局部模块：

• 在视觉稿中选择目标区域，找到 objectID
• 将视觉稿 ID 和 objectID 都提供给大模型
• 注意：必须提供 objectID，容器 ID 无法定位目标区域

常见问题

如何直接导出视觉稿页面的截图？

在印迹视觉稿页面，点击右上角的导出按钮，选择"导出为图片"即可获得完整的视觉稿截图。

系统要求

• Visual Studio Code / CatPaw / Cursor 1.77.0 或更高版本
• Node.js 18.0 或更高版本（用于 MCP 功能）

相关文档

• 一键配置 AI Coding Rule 和 MCP