Cursor-AI代码编辑器介绍与实践
简介
Cursor的定位是一款AI代码编辑器,它基于vscode编辑器而来,给开发者带来了极佳的AI融合代码编程体验。开发者使用Cursor的过程中,好像在和AI进行结对编程,而Cursor正是为结对编程提供最佳交互体验的超级助手。
没有Cursor之前,开发者想要让AI协助编程,需要在编辑器之对AI进行提问,再把AI回答的内容进行拆解后手动录入到代码编辑器之中。而拥有了Cursor之后,体验和效率都有了质的提升,和代码编辑器的深度融合之后,开发者的意图会更快更高效地传递给AI,而AI的建议和修改结果会更加直接地呈现在代码编辑器中,开发者只需要进行确认即可。整个过程就好像结对编程中,开发者的编程小伙伴告诉开发者说:“嘿,我按照你的需求把代码改好了,你看看”,开发者只要确认之后告诉他:“没问题,提交吧!”,一切就丝滑般地完成了!
接下来,我们将从Cursor的主要功能介绍开始,一步一步地了解和使用这款AI代码编辑器。
主要功能
Tab 自动补全代码+智能重写+光标预测
使用方式:tab
功能概述:
- 代码补全:编写代码过程中Cursor会预测开发者的光标之后要写的内容,预测的内容会先以灰色显示出来,只有按下tab时才会真正输入到光标之后。体感就像有人在预测开发者要写什么,如果预测的正确,就可以瞬间完成输入。另外,Tab不仅能插入代码,它也可以在光标附近对代码进行编辑或者删除,甚至还可以对相关联的代码进行多行代码补全。
- 智能重写:Cursor会在开发者修改代码的时候实时判断是否要帮助开发者进行智能重写,重写的内容会以提示框形式显示出来,只有开发者按下tab时才会覆盖重写。
- 光标预测:Cursor还会在开发者修改一个位置时,智能进行光标预测,即预测开发者还会改文件的其他什么位置的代码(Cursor会预测修改的位置是否会引起其他位置的修改),开发者甚至不需要移动光标,只需要一路按下tab,即可以连续修改。
示例1-自动补全:如图,开发者想写一个计算数字文案的方法,从9行开始写代码。文件里有类似的代码了,开发者想再写一个以“百万”切分的文案,只需写第9行的一半,Cursor就会根据文件上下文预测出后面所有的代码(预测待定状态的代码是灰色的帮助开发者识别),此时如果开发者认可它的预测,那么只需要tab一下,就完成了整个新方法的编写。
示例2-智能重写:如图,当开发者修改或编辑代码时,Cursor会把代码修改建议以提示框形式展示,而不是上面代码补全的灰色代码提示(示例中Cursor发现光标所在行是无法执行到的无效代码,所以在提示框中建议删除)。这个功能在进行代码重构时会有不小的帮助。
示例3-光标预测:如图,当开发者在绿色框位置修改了一个函数名,Cursor也会预测开发者也需要修改其他相关联的函数名,此时红框的部分出现一个tab小图标,开发者只需要按下tab就可以完成连续性的修改。
通过提示栏直接修改代码
使用方式:command + K
功能概述:通过唤起和AI的对话,把想要修改代码的意图告诉AI,AI帮助开发者修改代码,开发者进行确认。(引导AI修改代码最快的方式)
- 子功能1-编辑框中唤起提示栏
- 生成新内容:如果开发者按下【command + K】时没有选中任何内容,AI则会帮开发者生成新的内容。
- 修改选中内容:如果开发者按下【command + K】时选中了内容,AI则会帮开发者编辑修改选中的内容。
- 子功能2-内置终端中唤起提示栏:AI会根据开发者的意图帮开发者生成终端命令
使用技巧:
- 图片指示:提示栏是可以直接粘贴图片的!把图片粘贴给AI,然后继续输入指令,AI会把图片内容作为上下文进行接下来编辑代码的依据。
- 后续指示:当开发者对AI第一次修改的代码不满意时,可以接着在提示栏里写指令给AI,不用重头开始,直到开发者满意为止再accept。
- 快速回答:当开发者仅想要提问了解比如某段代码作用,不想立刻修改代码时,就可以通过quick question【Alt Enter】(或点击quick question)来对AI提问,AI会仅给出回答,不会修改代码。如下图:
示例-1:如图,开发者想把前面写的两个类似的方法封装一下,减少代码冗余,开发者只需要选中想要的函数,并且【command+k】唤起聊天,Cursor就可以完成后续的修改,修改后Cursor会通过类似git diff的形式(红色表示删除,绿色表示新增)让我确认(accept,注意这里可以单行确认,也可以一起确认,建议写生产代码时逐行阅读确认,不可过于相信AI的生产)。开发者确认之后就完成了编写。
示例-2:如图,在终端中,可以在完全不了解这个项目(以小程序项目为例)的时候,让AI帮开发者生成该项目启动开发环境的命令,并成功运行。
通过聊天功能答疑或修改代码
使用方式:command + L
功能概述:通过【command + L】唤起AI详细聊天,进行问题答疑或代码修改,是【command + K】的详尽版本,不仅能修改代码,还可以回答开发者的各种问题进行答疑。
和提示栏【command + K】功能的区别:【command + K】主要负责用来生成或修改局部的代码,而【command + L】是用来针对更宽泛的代码问题进行对话的(支持多轮对话),可以针对更宽泛的编程问题进行解答。理论上,聊天框功能能覆盖提示栏功能,但聊天框功能更适合如下场景:
- 回答通用编程问题
- 学习技术或者框架
- 获取技术最佳实践
- 调试或者排查错误
- ......
使用技巧:
- 图片指示:提问时可以使用图片,比如让AI根据设计稿写代码
- @上下文:提供上下文信息给AI,让AI在特定领域或知识体系下更准确回答问题,详见下文【合理使用上下文】
示例:开发者先让AI解释代码的含义(修改别人代码前大致了解或codereview时效率非常高),然后开发者让AI给出优化方案(可以看到详细的优化方案),最后开发者可以在红色框的位置进行【apply】就生成了修改内容,再进行逐个确认即可。
Composer 全局掌控
使用方式:command + I
功能概述:提示栏【command + K】擅长局部代码的编辑修改,那如果开发者想对整个项目进行全局修改怎么办呢?Cursor还提供了擅长全局跨文件管理代码能力的功能Composor【command + I】,这是Cursor封神的重要功能之一。Cursor团队为此功能起名为Composer,创作者。我猜想它象征着Cursor希望可以通过此功能,可以对全局代码进行一切的统筹安排,包括不限于:代码的增删改查、项目的安装启动,甚至部署上线!
Composer有两种模式可以切换:
- normal模式
- 不能自动使用命令行执行命令
- 需要手动指定上下文
- 需要用户交互去执行一个个任务
- agent模式(更智能,更自动)
- 可以自行使用命令行,执行命令完成任务
- 可以自己决定用什么上下文信息,不用手动指定
- 全自动执行一个个任务,并能知道执行顺序
利用Composer的agent模式,只需要给AI指令,它就会自动规划好需要完成这个指令需要的任务,并且按照合理的逻辑依次执行相应的任务,直到完成。所以,这个模式可以轻松完成例如:新项目创建和依赖安装、全局创建和修改多个文件等等很多平时人工开发需要手动频繁执行的操作。
示例:通过Cursor快速生成前端项目,开发者不需要去查阅文档,全流程由AI进行自动生成:项目结构、依赖安装、最佳实践等都会由AI自动分为一个个任务完成。
自动寻找bug和修复
Cursor通过Bug Finder功能可以尝试从修改的记录中找到潜在的bug,会自动生成一个bug报告,上面有每个bug的详细内容,以及bug的可信度指标,如果开发者认可则可以通过其提供的fix按钮进行修复。此功能还在beta版本,可以在业务场景中进行尝试使用。
示例:
实践案例
以下收集了实际业务中应用Cursor的实战案例供参考,这些案例只是其能力的部分展示,Cursor可以应用在业务开发的地方非常多,随着它能力的增强,相信Cursor能覆盖的业务场景会越来越多,处理的准确度会越来越高!
根据设计稿直接生成页面代码
在前端业务开发中,一个开发的大头就是UI设计稿的代码还原,这部分非常消耗人的眼力和耐心,复杂的UI界面往往要花费较长的时间才能完成界面代码的编写。现在有了Cursor,我们可以直接把设计稿图片发给它,让它进行界面代码的编写。实际使用下来,虽然Cursor不能百分百还原设计稿意图,但是基本可以完成百分之八九十的模版代码的编写(特别复杂的设计稿可能生成效果有限,但常规设计稿已经非常提高效率了),开发人员只需在其基础上进行调整即可,极大地提高了这部分代码编写的效率,尤其生成的类名英文更加贴切准确,语义化准确度已经超过大多数人,开发人员也无需像以前一样抓破脑袋想各种英文的命名,这些Cursor瞬间就可搞定。
下面的例子是近期开发教务系统时,课表时间设置页UI代码由Cursor生成的使用案例,可以看到,通过提示栏功能把设计稿喂给AI之后,绿色的部分就是AI瞬间生产的代码,非常准确好用。
自动填充业务代码
自动填充各种业务代码是最常见的使用Cursor场景之一,例如各种功能性、计算性、数据处理性的代码等等。
下面的例子是近期开发教务系统时,根据需求文档的要求,自动生成教务系统周次复杂数据处理的代码。这种复杂、分支逻辑多的代码也是Cursor的强项,极大地节省了人工写起来花费的时间,同样虽然生成的代码不是每次都百分百正确还需要人进行审核及测试确认,但是可用性依然非常高。
再来看一个案例,类似下方这种业务工具函数,Cursor生成起来非常准确和快速。以下是自动生成的通用时间计算的业务代码。
自动生成代码注释
不喜欢写注释?业务开发时准确完善的注释对于迭代维护来说非常重要,但是在实际场景中有的开发者因为各种原因不喜欢写或者没写注释,而有了Cursor,生成注释也是一瞬间的事儿。
下面的例子是近期跑腿开发中,Cursor帮助自动生成的注释,准确清晰。
根据ApiFox文档自动生成接口代码
接口对接和接口定义代码是前端开发中最为常见的场景之一,Cursor在此场景下对开发人员的助力同样非常大。没有Cursor前,开发人员需要人为分析接口文档,然后手动编写接口定义代码。使用Cursor之后,只需要喂给它接口文档的地址(如果有的话),或者把接口文档复制或导出喂给它,就可以自动生成所有接口定义代码,快速准确高效。
下面的例子是近期跑腿开发中,Cursor帮助自动生成接口定义代码。(我们使用的ApiFox的接口文档是内网地址不能直接访问,所以我们实践可以从ApiFox导出成markdown直接喂给Cursor):
自动生成git commit message
每次提交代码前想破脑袋要怎么写commit信息?最后写出的commit信息还是非常简陋?有了Cursor,这些都不再是问题,交给它,它会根据开发者要提交的内容,自动帮开发者写出准确的commit信息(如果开发者历史上使用了规范化的commit格式,它也会同样跟随!)。
下面的例子是一次commit提交,在源代码管理的输入框右侧有个小按钮(第1张图),点击之后AI就会分析你要提交的代码,自动帮你生成commit message(第2张图),非常方便。
实战技巧
在使用Cursor的过程中,我们可能会遇到以下问题:
1、AI修改的代码的格式和我的预期不符
2、AI修改代码的位置不对
3、AI不能理解我的需求
......
总结来说,我们怎么才能通过Cursor让AI更好地理解我们的开发意图,是实战中非常重要的环节!
下面提供一些实战技巧供参考,可一定程度上解决上述问题。当然,如果还有问题,可以参看下文【用好Cursor的关键】。
使用 Cursor rules 给AI提供预设规则
我们可以给Cursor的AI提供一些预设,来帮助它更好地识别项目内容,更符合预期的生产代码。
如下图所示,可以在【Cursor setting】中,在红色框中为AI提供统一的提示词,比如回答时请用中文等。
但是我们的项目各有不同,例如语言规范等,所以更加建议使用项目根目录下新建并使用.Cursorrules文件来为各个项目提供单独的规则,注意绿色框部分勾选开启此功能(默认是开启的)。
那么我们可以在.Cursorrules文件中写什么预设呢?
可以写任意开发者想让AI知道或者需要AI按照自己意愿进行的内容,例如:
1、编码规范
2、框架使用规范
3、项目最佳实践
......
案例参考:
# 角色 你是一位专业的编程助手,主要专注于编写清晰、可读的 Next.JS + Tailwind + TypeScript 代码。 # 技术专长 - 精通最新版本的 Next.JS,熟悉其最新特性和最佳实践 - 精通 TypeScript 和 Tailwind CSS - 熟悉 Supabase 的最新特性及其与 Next.js 应用的集成 - 使用 Tailwind CSS 进行样式设计,了解适合明暗模式的常用颜色 - 精通项目基本信息中说明的其它技术,并按照项目基本信息中的要求进行开发 # 准则 - 严格按照用户要求执行 - 采用逐步思考方式: - 首先详细描述构建计划 - 使用伪代码详细说明 - 确认后再编写代码 - 始终编写: - 正确且最新的代码 - 无bug的代码 - 功能完整的代码 - 安全的代码 - 高性能和高效的代码 - 注重代码可读性优于性能 - 完整实现所有请求的功能 - 不留待办事项、占位符和缺失部分 - 务必注明文件名 - 保持简洁,减少不必要的描述 - 如有不确定的答案,要明确说明 - 如不知道答案,直接承认而不是猜测 # 项目基本信息 - 前端:Next.JS + Tailwind + TypeScript - Next.JS 使用app router特性 - 后端:Next.JS + Prisma + MySQL - 数据库:MySQL - 代码规范: - 满足 ESLint 代码规范,使用根目录下.eslintrc.json 配置 - 目录规范: - 页面放在src/app/pages目录下 - 页面公共组件放在src/app/pages/components目录下 - API接口都放在src/app/api目录下 |
插件推荐
可以在vscode插件市场,搜索Cursor rules,选用合适的插件,可以帮助开发者快速创建和维护每个项目的规则,例如这个项目,已经沉淀了非常多的规则最佳实践,可以在此基础上进行扩展:
合理使用上下文
在AI辅助编程中,提供上下文至关重要,勤用@上下文可以让AI更准确更高效,因为:
- AI自身知识局限性:AI虽然知识量巨大,但AI对某些特定领域可能不清楚,需要为其提供资料
- AI知识使用范围的可控性:AI回答时使用的知识范围可能是不可控的,需要为其提供一些约束性的范围指向
- 项目的特殊性:每个私有项目都有自己独特的一面,需要为其提供一些项目特殊性的资料,帮助Ai更好地针对特定项目做出特定场景的决策
所以在和Cursor对话中,一定要勤用@符号进行范围声明,让AI根据开发者的@进行分析,这样开发者的意图将被更好地被AI理解,AI的产出也相应地越符合开发者的预期,让我们看下常用的@命令有哪些:
- @Files:锁定某些文件(包括图像)
- @Folders:锁定某些文件夹
- @Code:锁定某段代码
- @Docs:锁定文档
- @Web:索引互联网
- @Codebase:锁定整个项目
- @Git:锁定git信息
- 当前分支与主分支的diff信息
- 待提交的修改信息(可以用这个快速生成git commit message)
- 某个commit的diff信息
- @Notepad:锁定某些上下文记录
提供给AI这些上下文时,一定要重点突出:只提供重点有关的上下文,不要一股脑都给AI。给的太多或给的太少都不好,可以自行尝试。
@Codebase 项目全局索引
单独说下@Codebase,它会扫描整个项目来提供上下文信息,适合大项目跨文件进行分析。使用时,会对项目构建索引用于扫描,在setting里可以看到相关情况:
小技巧:在开发者的项目根目录创建.cursorignore文件,把不需要AI理解的文件排除出去,这样可以大大减少不必要的信息索引,一方面是省流,另一方面是信息提供更准确。例如:
上下文来源
我们要善于合理提供上下文给AI以达到最佳产出效果。这里再对上下文进行一个梳理,根据上下文获取途径是当前项目还是外部,可以有如下区分:
- 项目内部:@Code < @Files ≈ @Git < @Folders < @Codebase(来源信息承载从小到大)
- 项目外部:
- @Docs:提供外部文档的http地址,Cursor会帮开发者自动抓取并关联所有文档,如下图(添加Vue官方文档):
- 技术框架文档(例如Vue、React的官方文档首页地址等)
- 知识库文档
- ....
- @Web:
- 可以根据开发者的提示词,去可能得网站搜索相关内容
- 可以@单个网址,引入一个页面信息,可以适用于
- 一个接口文档
- 一个需求文档
- ....
使用 Notepad 保存上下文模版
上面我们使用Cursor rules可以用来全局进行上下文预设,而Notepad则可以把上下文根据需求切分成小块,在合适的时候进行@,可以更精准地控制上下文的获取和切换,所以开发者可以利用Notepad把常用的上下文保存起来以供后续使用。
示例:在编辑的文件导航最下方,可以新建Notepad(第1张图),在里面可以@多个文件,这样你在聊天框里可以直接@这个Notepad(第2张图),这样对于每次都要@很多固定文件的场景非常有用。当然你可以在Notepad写各种预制的prompt(第3张图),这样就不用每次都写一遍了。
用好Cursor的关键
使用Cursor的本质是使用AI。
用好Cursor的关键,核心不仅仅是提升对Cursor提供的功能的熟练度,这些只是“术”,更核心的“道”是:学习如何更合理的和AI进行交互,即提高自己的prompt能力。
善于使用文字进行逻辑表达的人将会发挥AI更大的能力!
关于源代码安全
先总结结论:源代码内容相对安全。其隐私协议通过SOC 2 certified 认证(一种公认的隐私安全认证)。
再看原因:
Cursor官方隐私政策:https://www.Cursor.com/privacy
隐私模式(Privacy Mode):
- 开启时:完全零数据保留,代码不会被存储或用于训练(默认开启)
- 关闭时:会收集遥测和使用数据,包括:提示词、编辑器操作、代码片段、代码编辑记录
另外:
1、使用codebase功能时(索引源代码),源代码被上传Cursor服务器仅用于嵌入向量的计算,服务器仅会存储计算后的向量以及文件的元数据(文件哈希、名字等),并不会存源代码内容。
2、Cursor服务器会缓存文件(加密后的源代码)内容以减少用户的使用延迟。加密秘钥每个客户端上唯一生成的(而且只在一个请求周期里存在)。缓存的文件都是临时存在,不会永久存储,也不会用于数据训练(开启隐私模式时)。
参考
https://docs.cursor.com/get-started/migrate-from-vscode
https://sunnyd.top/blog/learn-cursor-cmdk
最后
编程从机器语言、汇编语言、高级语言(过程、面向对象、函数式)的发展历程来看,人类的编程语言在一步步地靠近自然语言,可以大胆地想象一下,人机交互的语言的媒介会不会最终就会演变成自然语言!也许有一天人类真的可以达到“人机合一”的境界。
工欲善其事,必先利其器。Cursor这把利器已经开始颠覆当前代码开发的模式,让它带我们走进AI编程世界的第一步!