使用Cursor自动生成完整函数的指南

简介: 本文分享了如何利用Cursor的AI功能快速生成可用的函数代码。以提取Markdown图片链接为例,通过分步描述需求、迭代优化并生成测试用例,演示了从简单实现到生产级代码的完整流程。文章总结了分步细化需求、明确输入输出及生成测试等最佳实践,并提醒仍需人工审查以确保代码安全与业务逻辑正确。

在日常开发中,我们经常遇到需要快速实现某个功能但又不愿重复造轮子的情况。最近我发现了一个高效的方法:使用Cursor编辑器配合其强大的AI功能,可以自动生成完整的、可直接使用的函数代码。下面我将通过一个实际案例,分享整个操作流程。

一、从实际问题出发

假设我们需要开发一个Markdown文档解析工具,其中有一个需求:提取文档中所有图片链接,并返回包含文件名和URL的对象数组

传统做法是:打开搜索引擎,查找正则表达式,调试边界情况……但今天我们用不同的方式。

二、在Cursor中的实际操作

步骤1:明确描述需求

我在Cursor中新建了一个JavaScript文件,然后直接以注释的形式描述需求:

// 需求:编写一个函数,从markdown文本中提取所有图片链接
// 输入:markdown字符串
// 输出:数组,每个元素包含 filename 和 url
// 图片格式为 ![](url) 或 ![alt](url)
// 需要处理相对路径和绝对路径

步骤2:生成初始代码

将光标放在注释下方,按下 Cmd+K(Mac)或 Ctrl+K(Windows),Cursor会弹出AI对话框。我直接输入:

“请实现这个函数,要求处理标准markdown图片语法,并考虑各种边界情况。”

生成的第一个版本如下:

function extractImageLinks(markdown) {
const regex = /!\[(.*?)\]\((.*?)\)/g;
const matches = [];
let match;

while ((match = regex.exec(markdown)) !== null) {
   const altText = match[1];
   const url = match[2];
   // 从URL中提取文件名
   const filename = url.substring(url.lastIndexOf('/') + 1) || `image_${matches.length + 1}`;
   
   matches.push({
     filename: filename,
     url: url,
     alt: altText || ''
   });
 }

return matches;
}

步骤3:迭代优化

第一版代码基本可用,但我发现几个问题:

  1. 文件名提取太简单,可能包含查询参数
  2. 没有处理baseURL
  3. 没有去重

我继续与Cursor对话:

“优化这个函数:1. 清理文件名中的查询参数和哈希 2. 添加baseURL参数处理相对路径 3. 对结果去重”

Cursor给出了改进版本:

function extractImageLinks(markdown, baseURL = '') {
const regex = /!\[(.*?)\]\((.*?)\)/g;
const linkMap = newMap();
let match;

while ((match = regex.exec(markdown)) !== null) {
   let url = match[2].trim();
   
   // 处理相对路径
   if (baseURL && !url.startsWith('http') && !url.startsWith('//')) {
     const base = baseURL.endsWith('/') ? baseURL : baseURL + '/';
     const relative = url.startsWith('/') ? url.slice(1) : url;
     url = base + relative;
   }
   
   // 提取干净的文件名
   const cleanUrl = url.split('?')[0].split('#')[0];
   let filename = cleanUrl.substring(cleanUrl.lastIndexOf('/') + 1);
   
   // 如果没有文件名,生成一个
   if (!filename || filename.includes('.')) {
     filename = filename || `image_${linkMap.size + 1}`;
   } else {
     filename += '.jpg'; // 默认扩展名
   }
   
   const key = cleanUrl.toLowerCase();
   if (!linkMap.has(key)) {
     linkMap.set(key, {
       filename: filename,
       url: url,
       cleanUrl: cleanUrl,
       alt: match[1].trim() || ''
     });
   }
 }

returnArray.from(linkMap.values());
}

步骤4:添加测试用例

为了确保函数可靠性,我让Cursor生成测试用例:

“为这个函数编写测试用例,覆盖:正常图片、带alt文本、相对路径、重复图片、空输入等情况”

// 测试用例
const testMarkdown = `
# 测试文档

![图片1](https://example.com/image1.jpg)
![图片2](/relative/path/image2.png)
![图片1](https://example.com/image1.jpg) <!-- 重复 -->
![带alt文本](https://example.com/image3.jpg?width=800#section)
`
;

const results = extractImageLinks(testMarkdown, 'https://example.com');
console.assert(results.length === 3, '应该去重');
console.assert(results[0].filename === 'image1.jpg', '文件名提取正确');
console.assert(results[1].url === 'https://example.com/relative/path/image2.png', '相对路径转换正确');

三、高级技巧:处理复杂需求

当我需要更复杂的功能时,比如支持嵌套在代码块中的图片、处理HTML格式的img标签,我可以更具体地描述:

“扩展函数功能:1. 忽略代码块内的图片 2. 支持HTML img标签 3. 添加文件类型过滤”

Cursor生成了包含完整错误处理和配置选项的生产级代码:

function extractImageLinksAdvanced(markdown, options = {}) {
const {
   baseURL = '',
   ignoreCodeBlocks = true,
   includeHTML = true,
   allowedTypes = ['.jpg', '.jpeg', '.png', '.gif', '.webp']
 } = options;

// 移除代码块(如果启用)
let processedText = markdown;
if (ignoreCodeBlocks) {
   processedText = processedText.replace(/```[\s\S]*?```/g, '');
   processedText = processedText.replace(/`[^`]*`/g, '');
 }

const results = [];
const urlSet = newSet();

// 处理markdown图片
const mdRegex = /!\[(.*?)\]\((.*?)\)/g;
let mdMatch;

while ((mdMatch = mdRegex.exec(processedText)) !== null) {
   processImage(mdMatch[2], mdMatch[1]);
 }

// 处理HTML图片(如果启用)
if (includeHTML) {
   const htmlRegex = /<img[^>]+src="([^"]+)"[^>]*alt="([^"]*)"[^>]*>/gi;
   let htmlMatch;
   
   while ((htmlMatch = htmlRegex.exec(processedText)) !== null) {
     processImage(htmlMatch[1], htmlMatch[2]);
   }
 }

function processImage(rawUrl, altText) {
   // ... 详细的处理逻辑
   // (此处省略具体实现,Cursor生成了约50行代码)
 }

// 类型过滤
return results.filter(img => {
   const ext = img.filename.toLowerCase().substring(img.filename.lastIndexOf('.'));
   return allowedTypes.includes(ext);
 });
}

四、最佳实践总结

经过多次实践,我总结出以下使用Cursor生成函数的经验:

  1. 分步描述需求:先描述核心功能,再逐步添加细节要求
  2. 指定输入输出:明确说明参数类型和返回值格式
  3. 要求错误处理:主动要求添加边界情况处理和错误捕获
  4. 生成测试用例:让AI编写测试,确保代码可靠性
  5. 代码风格一致:指定与你项目一致的编码风格(如ES6+、TypeScript等)

五、注意事项

虽然Cursor能极大提升效率,但需要注意:

  1. 代码审查必不可少:AI可能引入安全漏洞或性能问题
  2. 复杂业务逻辑仍需人工设计:AI擅长实现模式化的代码,但业务逻辑需要人类把控
  3. 版权和许可问题:确保生成的代码不侵犯第三方版权

结语

通过Cursor自动生成函数,我节省了大量查找文档和调试的时间。更重要的是,这种方式让我能更专注于高层次的设计,而将重复的编码工作交给AI助手。工具的价值不在于完全替代程序员,而在于让我们能更高效地解决实际问题。

尝试在你的下一个项目中使用这种方法,相信你会有全新的开发体验。

相关文章
|
2天前
|
数据采集 人工智能 安全
|
11天前
|
云安全 监控 安全
|
3天前
|
自然语言处理 API
万相 Wan2.6 全新升级发布!人人都能当导演的时代来了
通义万相2.6全新升级,支持文生图、图生视频、文生视频,打造电影级创作体验。智能分镜、角色扮演、音画同步,让创意一键成片,大众也能轻松制作高质量短视频。
1021 151
|
3天前
|
编解码 人工智能 机器人
通义万相2.6,模型使用指南
智能分镜 | 多镜头叙事 | 支持15秒视频生成 | 高品质声音生成 | 多人稳定对话
|
17天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1720 9
|
8天前
|
人工智能 自然语言处理 API
一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸
一句话生成拓扑图!next-ai-draw-io 结合 AI 与 Draw.io,通过自然语言秒出架构图,支持私有部署、免费大模型接口,彻底解放生产力,绘图效率直接爆炸。
660 152
|
10天前
|
人工智能 安全 前端开发
AgentScope Java v1.0 发布,让 Java 开发者轻松构建企业级 Agentic 应用
AgentScope 重磅发布 Java 版本,拥抱企业开发主流技术栈。
626 13
|
5天前
|
SQL 自然语言处理 调度
Agent Skills 的一次工程实践
**本文采用 Agent Skills 实现整体智能体**,开发框架采用 AgentScope,模型使用 **qwen3-max**。Agent Skills 是 Anthropic 新推出的一种有别于mcp server的一种开发方式,用于为 AI **引入可共享的专业技能**。经验封装到**可发现、可复用的能力单元**中,每个技能以文件夹形式存在,包含特定任务的指导性说明(SKILL.md 文件)、脚本代码和资源等 。大模型可以根据需要动态加载这些技能,从而扩展自身的功能。目前不少国内外的一些框架也开始支持此种的开发方式,详细介绍如下。
385 4