초보자를 위한 커서 튜토리얼(AI 코드 편집기) [0]

1. Cursor AI 简介与准备工作 [0]

  1. Cursor AI 是一个AI驱动的代码编辑器 [0]。
    1. 它旨在让开发过程显著简化 [0]。
    2. 教程分享了作者几周使用经验和最佳实践 [1]。
    3. 建议初学者使用,以了解AI工具的工作方式 [1]。
    4. 建议先下载,它是免费使用的 [3]。
    5. 经验丰富的开发者也推荐使用,因为它很酷 [5]。
    6. 建议打开新文件夹,避免丢失工作 [6]。

2. AI 使用前的规划原则 [7]

  1. AI 最擅长解决 小而离散 的任务 [8]。
    1. 提供的上下文和信息越具体越好 [9]。
    2. 过于笼统的任务(如“生成待办事项应用”)结果不可预测 [10]。
    3. 必须有清晰的构建愿景 [12]。
    4. 建议至少画出用户界面的草图 [12]。

3. Composer 功能:大范围代码生成 [15]

  1. Composer 功能可同时编辑多个文件并创建新文件 [15]。
    1. 适用于生成全新应用或大范围功能变更 [23]。
    2. 启用步骤:文件 > 偏好设置 > 游标设置 > 功能 [17]。
    3. 默认情况下,Composer 可能处于禁用状态 [19]。
    4. 打开 Composer 视图:按 Ctrl+I (Mac: Command+I) [21]。
    5. 作者指定了所需的技术栈(Express, SQLite, JS, HTML, CSS, Tailwind)[26]。
    6. 如果不确定技术栈,可以询问推荐 [27]。
    7. AI 会生成大量文件,但无法执行终端命令 [29]。
    8. 生成完成后,可以查看所有文件 [35]。
    9. 接受更改类似于 GitHub Pull Request 的流程 [37]。
    10. 接受所有更改后,文件(如 Server, Index, Style, Script)会被生成 [38]。

4. 通用聊天视图:Ctrl+L/Command+L [40]

  1. 通用聊天视图通过 Ctrl+L (Mac: Command+L) 打开 [41]。
    1. 此视图可访问整个代码库的上下文 [42]。
    2. 可以手动添加上下文,例如指定文件(如 server)[43]。
    3. 支持网络搜索、图像、链接文档等多种上下文输入 [44]。
    4. 给予的上下文越多,性能越好 [45]。
    5. 示例:要求在 server 文件中添加更多独特的食谱 [48]。
    6. 可以选择手动复制代码或按 Apply 按钮 [52]。
    7. 按 Apply 会在文件中生成一个 Diff 视图,显示更改 [54]。
    8. 接受更改后,新食谱被成功添加到文件中 [56]。
    9. 可以直接回复特定响应进行微调(如替换食谱)[57]。
    10. 聊天视图还支持代码库搜索功能 [61]。
    11. 使用 Control+Enter 或 Command+Enter 搜索 [61]。
    12. 搜索结果会提供文件和变量链接,可点击跳转 [61]。

5. 内联补全与 Ctrl+K (代码修改) [63]

  1. 内联补全在键入代码时提供长篇自动完成 [63]。
    1. 按 Tab 键即可完成建议的代码 [66]。
    2. 示例:在 index.html 中添加 select 框选项 [64]。
  2. 内联编辑器用于修改高亮的代码块 [71]。
    1. 高亮代码后,使用 Ctrl+K 打开内联编辑器 [72]。
    2. 可以直接输入指令,如“删除此段代码”[73]。
    3. AI 生成 Diff 视图,可接受或拒绝修改 [74]。
    4. 示例:要求添加更详细的选项,如“早午餐、午餐、晚餐”[75]。
  3. 功能总结对比 [77]:
    1. Composer (Ctrl+I):用于生成大量文件或大功能变更 [77]。
    2. Ctrl+K (内联):用于小范围、目标明确的代码修改 [78]。
    3. 聊天窗口 (Ctrl+L):用于介于两者之间的操作,如解释代码 [79]。
    4. 粘贴代码时,上下文会自动添加 [84]。
    5. 聊天窗口更侧重于修改建议和解释 [85]。

6. 使用图像生成代码 [87]

  1. 图像生成代码是最后一个主要功能 [87]。
    1. 示例:使用登录表单的图片生成代码 [89]。
    2. 建议使用 Figma 文件或设计师提供的图像 [90]。
    3. 操作:选择图像,要求生成包含该表单的 HTML 文件 [91]。
    4. 注意:在聊天中,AI 不会自动创建新文件 [94]。
    5. 必须手动创建新文件(如 form.HTML)[95]。
    6. 确保在目标文件打开时应用更改,AI会识别目标文件 [96]。
    7. 结果显示,生成的 HTML 非常接近原始图像 [97]。
    8. 尽管存在间距和字体问题,但结构准确 [102]。

7. 总结与后续学习推荐 [105]

  1. 作者认为 Cursor 极大地提高了生产力 [104]。
    1. 但作者强调,有效使用的前提是已经知道如何编程 [105]。
    2. 对于完全的初学者,使用难度会显著增加 [106]。
    3. AI 修复文件时,有时需要手动介入进行更改 [107]。
  2. 推荐学习资源:Brilliant [108]。
    1. 推荐学习 如何编程、LLM 原理或数据科学 [108]。
    2. Brilliant 通过动手实践学习数学、数据分析、编程和 AI [109]。
    3. 采用第一性原理,确保理解概念背后的原因 [110]。
    4. 实践学习比仅观看讲座有效六倍 [112]。
    5. 内容由 MIT、Caltech 和 Google 等机构的专家开发 [112]。
    6. 强调批判性思维,而非死记硬背 [113]。
    7. 每日小课程使持续学习变得轻松 [115]。
    8. 提供计算机科学、Python 课程和 AI 研讨会 [116]。
    9. 访问 brilliant.org/techwithtim 可免费试用 30 天 [117]。
    10. 订阅年费高级会员可享 20% 折扣 [118]。