Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>DaliDev VS Code ExtensionNew to Visual Studio Code? Get it now.
DaliDev VS Code Extension

DaliDev VS Code Extension

ycteng

|
5 installs
| (0) | Free
VS Code extension for DaliDev
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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 应用中:

  1. 选择模板
  2. 填写配置信息
  3. 点击"发送到 Cursor"
  4. 选择对应的 VSCode 实例

3. 处理流程

  1. 接收请求: VSCode 扩展接收来自 Web 端的简化请求
  2. 下载模板: 根据模板 URL 下载模板文件到本地
  3. 处理占位符: 替换 prompt 中的占位符为实际内容
  4. 生成文件引用: 添加模板文件路径引用
  5. 调用 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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft