AI编程ide:cursor

目标

1、了解什么是cursor,可在cursor做哪些事情

2、cursor的基本配置和相关工具

3、cursor实战,实现一个浏览器插件,该插件主要用于实现网页中英文翻译和总结功能。

一、cursor介绍

1、什么是cursor

Cursor 是一个专门为AI 辅助编程设计的现代代码编辑器,以下是它的主要特点和用途:

1)AI 辅助编码

实时代码补全和建议;自动生成代码片段;代码解释和文档生成;代码重构和优化建议;

2)智能对话

内置多个 AI 模型(如 GPT-4、Claude-3 等);可以直接与 AI 进行对话;支持代码相关问题咨询;错误诊断和修复建议

3)编辑器功能

语法高亮;代码格式化;智能缩进;多文件搜索;Git 集成。

2、cursor账号和登录

1)注册后有14天的试用时间

v2-cfd5e37c3ae8f797a858777ef3b4b98e_1440w

2)购买账号

可以在淘宝上购买共享账号,如果无法科学上网,需要购买email登录的账号,不要使用google账号登录。

3、cursor提供了3类对话框

1)chat对话框

v2-fbea540a1b39e2234b44c596d2f538f0_1440w

2种提交模式:submit(最简单的提交);codebase(会将当前空间中的文件进行检索,并将其作为上下文提交)

2)composer对话框

v2-b3b0d97cd091f4bed9480d28bc1d0141_1440w

2种提交模式:normal(会生成和修改文件,不会做其他操作);agent(会执行normal的操作,同时可自动下载依赖库,运行代码。如果出现错误会自动review并更改)

3)内嵌对话框

只会在鼠标的位置处打开和变更。

v2-40d970c350e4d201d7aed8de7c1c2d8a_1440w

常用的功能:生成代码;添加注释(选择代码);生成测试用例(选择代码);

v2-8e47a482cb980d9738c4938796280f4f_1440w

终端中可以帮助我们写执行命令,linux命令等。交换模式在输入问题后Alt+enter。

二、cursor工具使用

1、cursor配置

1)中文和编译器配置

shift+cmd/ctrl+P,输入language,选择中文安装。

v2-3e9c4be739290f2197b4dac9c3634b18_1440w

shift+cmd/ctr+P,输入Interpreter,选择python版本

v2-11327033d9bc46437ae1323e2930cc8e_1440w

2)基础信息配置

v2-c7a92edb20010feac918b83a3aba3871_1440w

1.rules for AI在设置中配置规则,分为全局规则和项目规则(.cursorrules文件)。

规则主要用于定义全局或项目的Prompt,包括定义回答时使用中文,定义返回格式,定义文件名,函数名的生成方式,定义代码生成风格(如缩进等)。

v2-890a4485f7285434395b12b2a98a5417_1440w

2.配置项目规则.cursorrules

在项目根目录下创建.cursorrules文件,并编辑文档,让其在每次会话结束后总结会话内容并保存到readme文件中。

每一次会话请求结束后进行会话总结,无论生成新文件还是修改已有文件都需要做总结,
并将总结内容Append写入到Readme文件中(说明文件中的内容是累积增加的)。
总结内容应包括:
   - 会话的主要目的
   - 完成的主要任务
   - 关键决策和解决方案
   - 使用的技术栈
   - 修改了哪些文件

3)features配置(重要)

1.cursor Tab自动补全

自动补全会根据上下文的内容给出建议,同时根据注释信息生成相应的代码。

v2-19e898d371b9a6fdc11d95d14ea0b237_1440w

2.chat & composer 配置

chat对话框中的2种提交模式:submit(最简单的提交);codebase(会将当前空间中的文件进行检索,并将其作为上下文提交)

composer对话框中的2种提交模式:normal(会生成和修改文件,不会做其他操作);agent(会执行normal的操作,同时可自动下载依赖库,运行代码。另外,如果出现错误会自动review并更改)。

内嵌对话框,只会在鼠标的位置处打开和变更。常用的功能:生成代码;添加注释(选择代码);生产测试用例(选择代码);终端中可以帮助我们写执行命令,linux命令等。交换模式在输入问题后Alt+enter。

v2-d788fecea724273904357e4008d598bb_1440w

3.codebase indexing 项目索引

忽略索引文件配置,会在项目的根目录下.cursorignore文件。编辑该文件,设置需要忽略的目录或文件。

v2-6fc9b77e79af831b065080d87ff03c9c_1440w

4.docs

可以结合@docs提示符进行文档内容提问。如将千问大模型的官网文档加入到docs中,可以快速让cursor帮忙编写与千问集成的调用。

千问模型使用文档:模型调用_大模型服务平台百炼(Model Studio)-阿里云帮助中心

v2-4b6eebb6e6225154fdcb482ebf22693d_1440w

在对话框中使用该docs,快速生成访问模型的代码

v2-a07ff34c4095ef5a5e61509a3057f416_1440w

2、cursor快捷键和相关命令

1)AI 相关:

  1. Cmd/Ctrl + L: chat对话框
  2. Cmd/Ctrl + I: composer对话框
  3. Cmd/Ctrl + K :内嵌对话框

2)@提示符,将信息追加到上下文中

对话框输入@,可添加文件作为上下文,可直接粘贴图片、截图等。

  • @Files 选择项目文件到chat的上下文,也可以直接拖拽。
  • @Folders 选择项目文件夹
  • @Codes 将代码段放入到chat上下文中,以便我们之后针对这段代码进行提问
  • @Docs 将网络的文档加入到chat上下文中。最常用的是将open ai官方文档的API加入进来。可以快速实现API调用。需要在配置中添加doc,然后再用该提示符。
  • @Git 可以结合版本信息提出问题
  • @Notepad 在项目左下角有notepad文件夹,可以在其中添加文档,进行项目描述。之后便可以在chat中使用。
  • @Codebase 会将当前空间中的文件进行检索,并将其作为上下文提交(会将空间中的文件创建索引库)
  • @Web 可实现web搜素(类似百度);可粘贴URL,再针对该网页内容进行问答。
  • @lint errors 检查文件中是否有错误。

3、cursor底层大模型

1)cursor内置模型

GPT-4(免费版每天有限额(通常是20-30次请求),超出限额需要订阅Cursor Pro)

GPT-3.5(完全免费,无使用限制)

Claude-3 Sonnet(目前免费,没有明确的每日使用限制,性能接近GPT-4)

Anthropic O1 (这是Claude-3的最高级版本,在Cursor中需要订阅Pro版才能使用)

2)大模型的选择

简单问题:cursor-small、4o-mini

复杂问题:chatGPT-4、claude

创造性问题:推荐claude

代码优化:推荐GPT-4

3)新增通义千问模型

登录阿里云账号,在百炼平台开通模型调用,从而获取模型调用的key。

v2-8e0d98fbedac943193291235be0a21b9_1440w

接口调用地址:如何通过OpenAI接口调用通义千问模型_大模型服务平台百炼(Model Studio)-阿里云帮助中心

v2-58d03a7fd63a9178b61d2c760b35fb93_1440w

注:在进行验证时,需要将其他模型都勾选掉,否则会校验所有勾选的模型。

使用时,切换到具体的模型上,进行提问

v2-9d7d393f80b6c0a7bf679269958cb02e_1440w

4)新增kimi模型

官网:Moonshot AI – 开放平台 ,注册会赠送15元。

API兼容openAI地址:platform.moonshot.cn/do

在控制台上添加相应的api-key,然后配置到cursor中,即可。

v2-b4ce0a7d2dd755c3e9419d51cb69fce4_1440w

5)新增deepseek模型

官网地址:DeepSeek Platform ,注册并实名认证后,送10元(1个月有效)

API文档:Your First API Call | DeepSeek API Docs

在控制台上添加相应的api-key,然后配置到cursor中,即可。

v2-272253e63c083fd09ba62f1e63c2e4ab_1440w

6)siliconflow平台提供的模型

官网:cloud.siliconflow.cn/mo,注册后,平台提供了很多免费的模型可供调用。

v2-8a0c5948ae398da9150d8bac434922b3_1440w

7)模型切换

在chat和composer对话框中在提问时都可以切换模型

v2-2e7e3b648358bc36058ddb6108450f5c_1440w

4、cursor与git

1)使用码云远程仓库

官网:Gitee – 基于 Git 的代码托管和研发协作平台

2)创建私有仓库

v2-aad5d388b1b58d08b07907badcb19b0f_1440w

3)关联cursor项目

本地已有项目的情况下,关联远程git仓库。

# 初始化后直接添加远程仓库
git init
git add .
git commit -m "初始化提交"
git branch -M main  # 设置主分支名称为main
git remote add origin https://github.com/用户名/仓库名.git
git push -u origin main

三、cursor实战

注意!!!在生成项目代码前不要使用试用版,没有快速流量后,生成会很慢。

1、项目介绍

实战项目,创建web浏览器插件,实现在线翻译能力。主要包括以下2个方面功能

1)选中页面上的文本,进行翻译

2)总结页面内容

3)使用kimi大模型API,进行底层的翻译功能

2、项目搭建

1)创建需求文档同时添加kimi api到docs中

文档:platform.moonshot.cn/do

v2-654538b230a3579a7331f0481c7cd6d0_1440w

2)生成ui示意图

将需求文档做为上下文参数,向模型提问并生成相关的UI文档。

v2-4a56b2e047435640202ab9b18964aacb_1440w

3)生成项目代码

1.将相关的文档拖拽到对话框中,同时将kimi api也设置到对话框中。使用cursor生成项目代码。

v2-ae40684ac72eaabcaeb0655b5512d2cc_1440w

2.生成代码后会列出以下注意事项,这些事项要处理

  • 获取Kimi API密钥并配置
  • 准备插件图标
  • 按照README中的说明安装插件

3.继续使用cursor生成图标

v2-20cb402ab969b4dd43ddbda211c0f3cf_1440w

4)安装浏览器插件进行测试

将安装的错误信息再次交由cursor进行修改

v2-3328068f0ebda27c6dff361ec00e7cbc_1440w

3、运行效果

安装插件,并配置kimi的 secret key后,访问插件效果

v2-e26e3af2db564fe92faddf2dbe4b17c0_1440w

四、问题

1、cursor配置模型错误

当配置模型错误后,点击此处,可查看具体配置信息。这里以使用siliconflow模型平台为例,在cursor中配置模型,并验证。

v2-51195cfce695288eb1d83956a29e0427_1440w

2、如何在composer中配置自动执行

可添加提示词:“在代码生成后,自动帮我安装第三方类库并执行程序”。

3、浏览器插件问题解决

当访问浏览器出现错误信息时,可以按F12打开浏览器控制台,将错误信息粘贴到cursor对话框窗口中,让cursor自动帮我们解决问题。