AI 编程:cursor 使用教程
这是小卷对 AI 编程工具学习的第 1 篇文章,今天以 cursor 为例,通过给提示词,让不懂编程的小白也能自己用代码实现需求
1.什么是 AI 编程工具?
可以分为两类:
狭义的 AI 编程工具
面向程序员的,主要用于提升写代码的效率
豆包 Marscode、Cursor 这样的 AI 编程 IDE 工具,就是专门为程序员提供的一个 AI 助手
功能有:生成代码、解释代码含义、优化代码结构、查找代码错误、回答编程问题
工具的主要作用是辅助编程,写代码变得很轻松
广义的 AI 编程工具
没有编程基础的人也能用的,可以自己创造应用
比如 Coze、Dify 这类智能体搭建平台
提供的功能有:可视化界面搭建、预设功能模块、简单逻辑配置、一键部署功能
平台提供搭积木的功能,用户组合积木就能实现各种应用程序
这类工具就降低了编程门槛,普通人都能用上
2. Cursor 的安装
访问 Cursor 的官网:https://www.cursor.com/ 下载客户端到本地,注册账号时可以选择谷歌邮箱登陆,新注册的账号有 14 天的 Pro 版本试用期,足够我们使用了。

3.基本功能使用
3.1 创建代码结构
Mac 用户使用 Command + i 可以唤醒 Composer,然后我们输入提示词创建代码结构

然后可以用浏览器打开 index.html 文件查看效果

Cursor 还有一些快捷键的功能,可以自行打开设置里的Keyboard Shortcuts
查看

3.2 新增/修改代码、文字
如果只想修改部分代码,可以鼠标选中后,使用Command + K
打开窗口,并输入修改要求;
不选中代码的情况下,打开窗口,可以要求 AI 实现新增的功能,比如这里我想增加一个广告位,效果如下:


3.3 自动补全代码、注释、文字
输入代码或者注释,Cursor 可自动补全代码,按Tab
键生效
比如下面我写了一行注释,按Tab
键后,自动生成对应功能的代码

除了补齐代码功能外,还有补齐文字的功能,比如下面的示例:

3.4 对话窗口
Mac 上使用Shift + Command + L
打开 Chat 窗口,在窗口里输入需求,AI 能为我们提供不同的方案
根据生成的代码,点击Apply
,再点击Accept
,代码就能应用了,然后可以刷新网页看下效果


3.5 项目理解
Cursor 具备理解整个项目代码的强大能力,注意是整个项目,不是单个代码文件!
这里在Chat
窗口输入@Codebase
然后要求 AI 分析代码功能点,这样即使是旧的,没人维护的项目,我们也能很快理清当前的功能有哪些
以小卷的 Github 上的开源项目为例:

3.6 全局搜索
我们还可以将其当做一个搜索工具,比如我们想找项目的某个功能点在哪个代码文件里,直接文字输入就行

4.自动爬取网页内容辅助编程
用户可以给 Cursor 提供需要分析的网页,Cursor 会自动爬取,作为辅助知识进行开发。该功能可以理解为联网查询,不过存在一些缺陷
静态网页爬取成功率较高,非静态网页爬取较难,可以完全爬不了!!!
操作方法:在 Setting > Cursor Setting > Features 设置里,在 Docs 位置进行配置
Name:指令名称
Prefix:待爬取的网页地址的前缀,这样可爬取多个网页
EntryPoint:网页地址
这里我们以菜鸟教程的地址为例,将所有 python3 作为前缀的网页内容爬取下来,注意因为网站都有反爬机制,所以失败也是正常现象

点击Confirm
后,就会开始爬网页,需要等待一段时间,爬取结束后,点击See page
按钮可以查看已经爬下来的网页

接下来,我们就可以根据爬取的内容对话了,需要引用到文件时在 Chat 窗口使用 @调出指令

输入指令时,为了避免大模型凭空捏造一些内容出来,建议后缀加上这段话,可以避免无效输出
请根据文件内容进行查找,如果找到,引用原文进行回答,并返回引用原文的地址,如果找不到,请回复不知道,一定不要胡编乱造
下面是演示效果:

5.小结
以上就是关于 Cursor 工具的基本功能使用教程了,下篇文章将会结合实际案例来讲 AI 编程工具的实际应用,我是卷福同学,记得给我点个关注吧!!!
版权声明: 本文为 InfoQ 作者【卷福同学】的原创文章。
原文链接:【http://xie.infoq.cn/article/b9a3d882e2f0e9e0d4ab353e3】。文章转载请联系作者。
评论