DaliDev VSCode Extension
DaliDev VSCode 扩展提供了智能模板管理和 AI 编辑功能,支持从 Web 端发送模板请求到 VSCode,自动下载模板文件并生成优化的 prompt 供 Cursor AI 使用。
主要功能
1. 智能模板下载
- 自动从 Web 端接收模板下载请求
- 将模板文件下载到本地工作区
.dalidev-templates/
目录
- 支持文件缓存,避免重复下载
- 自动清理过期模板(7天)
2. 动态 Prompt 处理
- 接收包含占位符的动态 prompt
- 自动替换占位符为实际内容:
{{TEMPLATE_LOCAL_PATH}}
→ 模板本地路径
{{TEMPLATE_FILE_STRUCTURE}}
→ 模板文件结构树
{{USER_PROMPT}}
→ 用户需求描述
- 生成包含文件引用的结构化 prompt
3. Cursor AI 集成
- 自动调用 Cursor AI 进行代码编辑
- 支持多 Cursor 实例(不同端口)
- 提供清晰的状态反馈
安装和配置
1. 安装扩展
将生成的 .vsix
文件安装到 VSCode:
code --install-extension dalidev-vscode-extension-0.0.1.vsix
2. 配置设置
在 VSCode 设置中配置以下选项:
- dalidev.webUrl: DaliDev Web 应用的基础 URL(默认:
http://localhost:5137
)
- dalidev-vscode-server.port: 服务器端口(默认:
5011
)
使用方法
1. 启动服务器
扩展激活时会自动启动服务器,也可以手动控制:
- 启动服务器:
Ctrl+Shift+P
→ Start dalidev Server
- 停止服务器:
Ctrl+Shift+P
→ Stop dalidev Server
- 清理模板缓存:
Ctrl+Shift+P
→ Clear Template Cache
2. 从 Web 端发送请求
在 DaliDev Web 应用中:
- 选择模板
- 填写配置信息
- 点击"发送到 Cursor"
- 选择对应的 VSCode 实例
3. 处理流程
- 接收请求: VSCode 扩展接收来自 Web 端的简化请求
- 下载模板: 根据模板 URL 下载模板文件到本地
- 处理占位符: 替换 prompt 中的占位符为实际内容
- 生成文件引用: 添加模板文件路径引用
- 调用 Cursor AI: 将最终 prompt 发送给 Cursor AI
API 接口
POST /ai-edit
接收简化的 AI 编辑请求
请求体:
{
prompt: string // 包含占位符的动态 prompt
templateInfo?: {
templateId: string
templateName: string
templateUrl: string // 模板下载地址
formData?: Record<string, any> // 用户配置信息
}
}
响应:
{
success: boolean
message: string
templateProcessed?: boolean
}
GET /project-name
获取当前项目信息
响应:
{
success: boolean
projectName: string
port: number
}
文件结构
.dalidev-templates/
├── template-id-1/
│ ├── index.vue
│ ├── components/
│ │ └── Button.vue
│ └── types.ts
└── template-id-2/
├── src/
│ └── main.ts
└── package.json
示例 Prompt
生成的最终 prompt 示例:
# 使用模板:基础表单模板
## 模板信息
- 模板名称:基础表单模板
- 模板下载地址:/templates/form/basic-form/basic-form.zip
- 本地路径:.dalidev-templates/basic-form
## 用户需求
创建一个用户注册表单,包含姓名、邮箱、密码字段
## 配置信息
```json
{
"formTitle": "用户注册",
"submitButtonText": "注册",
"theme": "primary"
}
模板文件结构
basic-form/
├── index.vue
├── components/
│ ├── FormInput.vue
│ └── FormButton.vue
└── types.ts
模板文件引用
以下是模板中的主要文件,你可以直接引用这些文件路径:
index.vue
components/FormInput.vue
components/FormButton.vue
types.ts
注意:这些文件已经在你的工作区中,你可以直接编辑和修改它们。
## 性能优化
### 1. 缓存机制
- 模板文件本地缓存,避免重复下载
- 智能缓存失效(1天)
- 自动清理过期文件(7天)
### 2. 传输优化
- 只传输文件地址和配置信息
- 不传输实际文件内容
- 90%+ 传输量减少
### 3. 处理优化
- 异步文件下载
- 并行文件写入
- 增量文件结构生成
## 故障排除
### 1. 服务器启动失败
- 检查端口是否被占用
- 尝试使用不同的端口
- 查看 VSCode 输出面板的日志
### 2. 模板下载失败
- 检查网络连接
- 验证 Web 应用 URL 配置
- 查看扩展日志
### 3. Cursor AI 调用失败
- 确保 Cursor 已安装并运行
- 检查 Cursor AI 功能是否可用
- 重启 VSCode 和 Cursor
## 开发
### 构建
```bash
yarn build
开发模式
yarn dev
打包
yarn package
许可证
MIT License