掘金 人工智能 19小时前
Cursor AI 编辑器入门教程和实战
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

Cursor是一款基于VSCode开发的AI代码编辑器,深度集成了强大的AI功能,旨在为开发者打造高效的人机协作编程环境。它采用GPT模型,支持多语言,界面友好,无需翻墙即可使用。Cursor提供Git提交信息自动生成、多样的@命令(如引用文件、代码解释、文档解析等)以及可自定义的AI生成代码规则。文章详细介绍了Cursor的Agent、Ask、Manual三种AI辅助模式,以及无需确认即可执行操作的Auto-Run模式,并提供了实战案例,指导用户如何利用Cursor高效完成项目开发,同时强调了明确表达需求和持续跟进确认的重要性。

💡 Cursor是一款AI代码编辑器,基于VSCode开发,集成了强大的AI功能,旨在提升开发者的生产力,构建高效的人机协作编程环境。

🚀 Cursor的核心优势在于其强大的AI能力,集成了GPT模型(可能为GPT-4),支持多语言,并且在国内无需翻墙即可使用,为开发者提供了便捷的开发体验。

🛠️ Cursor提供了多种实用的AI辅助功能,包括自动生成Git提交信息、通过@命令进行文件和代码引用、代码解释、文档解析等,并允许用户自定义AI生成代码的规则,以适应不同项目的开发规范。

🤖 Cursor拥有Agent、Ask、Manual三种AI辅助模式,Agent模式可主动执行任务,Ask模式用于对话交流获取建议,Manual模式则允许用户精确控制AI行为。此外,Auto-Run模式可实现AI操作的自动执行,但使用时需谨慎并做好监控。

💡 在实战部分,文章以创建一个Chrome翻译插件为例,展示了如何利用Cursor生成需求文档、技术方案文档、设计页面布局,并一步步搭建项目和实现功能,强调了清晰表达需求和持续跟进确认在AI编程中的重要性。

一、Cursor简介

1.1 什么是Cursor?

Cursor是一款真正意义上的AI代码编辑器,基于VSCode开发,集成了强大的AI功能。它不仅仅是一个VSCode插件,而是创造性地构建了一个高效的人机协作编程环境,旨在让开发者获得超凡的生产力。

1.2 Cursor的主要特点

二、安装与设置

2.1 下载安装

    访问Cursor官网:www.cursor.com点击"Download"下载适合你操作系统的版本(Windows/Mac/Linux)安装程序并启动Cursor

2.2 初始设置

首次启动Cursor时,你需要:

    选择界面主题(深色/浅色)可选择登录账号(也可跳过,直接使用)熟悉基本界面布局(与VSCode类似)

三、使用技巧

3.1. git提交信息自动生成,如下图所示点击图标即可生成提交信息:

3.2. 常用@命令讲解

在cursor对话框中有个@命令选择

3.3 设置AI生成代码规则

设置生成代码规则,提高工作效率,如下图所示

生成 typeScript 规则:

Description:TypeScript 开发规范,确保类型安全和代码质量Globs:**/*.ts, **/*.tsx# TypeScript 规则- 禁用 any 类型,使用 unknown 替代- 启用 strict 模式- 使用类型推导减少冗余类型声明- 公共函数必须包含 JSDoc 注释- 使用 type 而不是 interface(除了 Props

3.4三种AI辅助模式(Agent、Ask、Manual)详解:

模式用途特点适用场景
Agent让 AI 主动执行任务,自动完成代码编写、文件操作等• AI 可以自主调用工具和函数
• 能够自动创建、修改、删除文件
• 可以运行终端命令
• 适合复杂的多步骤任务
• 创建新项目
• 重构代码
• 调试问题
• 自动化任务
Ask与 AI 进行对话交流,获取建议和解释• 纯对话模式,不执行实际操作
• AI 提供建议、解释、代码示例
• 用户需要手动执行 AI 的建议
• 适合学习和咨询
• 代码问题咨询
• 学习新技术
• 获取编程建议
• 代码审查
Manual手动控制 AI 的行为,精确指定要执行的操作• 用户完全控制 AI 的行为
• 可以精确指定要修改的文件和内容
• AI 按照用户的指令执行
• 适合精确的代码修改
• 精确的代码修改
• 特定文件的编辑
• 需要严格控制的操作
• 调试特定问题

3.5、Auto-Run Mode 全自动模式

之前介绍的Agent模式,Agent会根据你的提示,判断是否要执行命令,如果需要执行命令,会提示你确认。Auto-Run 模式则进一步,Agent将无需确认就能执行命令和文件操作,朝着“全自动驾驶”又迈进了一步。使用建议:

    谨慎使用

      建议在新项目或简单的 Demo 项目中使用对于重要的生产项目,可以关闭此模式,防止误删、误改文件或者开启后,每次修改之后都要做下 Review确保设置了合适的命令白名单/黑名单

    监控执行过程

      虽然是自动执行,但要留意 Agent 的操作如果发现不当操作,及时终止保持文件的备份

    渐进式采用

      先在小项目中尝试熟悉了工作方式后再在更大的项目中使用根据项目需求调整配置

四、使用限制

4.1 免费版限制

4.2 付费版

五、cursor实战(100%AI实现的项目)

以创建一个chrome翻译插件为例,以下是用AI实现一个完成软件的大概流程,很多细化部分不会写进去。

5.1 创建项目

例如创建一个 ai-chrome-deepseek-translate-plugin 项目,然后用 Cursor 打开这个项目,后续我们也会在该目录搭建项目建议通过版本控制的方式从仓库拉取这个项目,目的是为了避免 Cursor 给我们改出问题,我们还能通过版本回退。

5.1.1 写需求文档和技术架构文档

    打开cursor聊天窗口,输入以下提示词,生成需求文档
实现一个 Chrome 浏览器翻译插件,需求是1. 可以对一篇文章进行完整翻译2. 可以对翻译后的文章进行下载,下载的格式包括 Mardkown、PDF3. 核心翻译实现使用 DeepSeek API4. 页面功能简约,主要围绕文章一键翻译和下载5. 翻译过的文章不需要保存为历史记录帮我实现需求文档,这个只是需求文档,不包含技术实现。结果保存到 docs 目录下的 需求文档.md
    生成技术方案文档因为这个翻译插件调用的是DeepSeek API,为了模型能够更好的理解所以在文档设置中添加这个文档。Markdown Preview Enhanced 查看架构流程图。
根据  @需求文档.md  生成一个技术方案文档,以 Chrome 浏览器插件的方式实现,包含项目目录结构。翻译采用 DeepSeek API,文档参见 @DeepSeek注意,这只是一个技术方案文档,不需要写具体代码实现,只需要写技术方案即可。结果保存到 docs/技术方案.md 文件中#### 5.1.2 设计页面(原型)或者UI
    规划页面布局和实现步骤Cursor 不会直接出原型,但我们可以用提示词让 Cursor 用 ASCII 字符画出页面布局。这个 ASCII 字符画的页面布局,Cursor 在后面的代码实现中会参考。
根据 @需求文档.md @技术方案.md   文档,规划实现的步骤,按页面、功能模块划分,用ASCII字符画出页面布局。结果要分文件,例如:示意图-页面.md 或 示意图-页面-模块.md 等等。按照实现步骤对文件加上序号。页面设计简约,不需要冗余的功能,主要突出对网页文章的一键翻译和下载。结果以 Markdown 格式写入到 docs/ 目录下。

更好的设计:最近一个比较流行的方法是唐Cursor以HTML 的格式生成UI/UX 设计图,例如输入如下命令

参考文档 @需求分析文档.md  @技术方案.md   请以资深UI设计师身份,为微信谷歌翻译插件  设计 UI/UX 原型。要求:1. 遵循Material Design设计规范,采用移动端优先策略;2. 采用Material Design配色系统,包含适当的投影和动效;3. 以产品经理的角度思考应用的交互效果4. 使用标准HTML5+CSS3实现,输出单页完整HTML文件,包含注释说明组件用途。结果写入到项目 docs/ui-ux.html 文件中

5.1.3 项目搭建

    快速项目搭建和根据步骤实现功能项目开始前设置一下模式,设置成全自动模式,就是不用我们手动确认,Cursor 会直接执行我们的指令。根据步骤一步一步实现功能就行。步骤一: 根据前面生成的文档搭建基础架构:
根据 @需求文档.md @技术方案.md 完成阶段一:基础架构搭建

5.2 总结

1、要把AI编程模型理解成一个代码能力超强的人,逻辑性很强,你需要很清楚的表达自己的需求,否则AI可能会给你错误的答案。有时差一个字生成的代码就会有问题。2、每一步都要去跟进确认修改,直至完善。3、一个实现思路不行就换一个思路去实现功能。

六、参考资源

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

Cursor AI代码编辑器 编程效率 GPT VSCode
相关文章