不懂代码也能做应用？AI 代码编辑器 Cursor 快速上手指南

蚝油菜花

已于 2024-10-17 17:54:50 修改

阅读量1.4k

点赞数 24

分类专栏：每日 AI 项目与应用实例文章标签：人工智能编辑器

于 2024-10-15 18:53:24 首次发布

本文链接：https://blog.csdn.net/qq_19841021/article/details/142961471

版权

每日 AI 项目与应用实例专栏收录该内容

659 篇文章

订阅专栏

❤️ 如果你也关注大模型与 AI 的发展现状，且对大模型应用开发非常感兴趣，我会快速跟你分享最新的感兴趣的 AI 应用和热点信息，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

微信订阅号｜搜一搜：蚝油菜花

在这里插入图片描述

🚀 快速阅读

Cursor 是一个基于 VSCode 的代码编辑器，它保留了 VSCode 的布局和快捷键，但它结合 LLM 增加了一些独特的功能，是一个能够帮助你编写代码的人工智能助手。
除了介绍 Cursor 的使用方式外，我还将借助 Cursor 生成一个应用，用户可以搜索任何股票市场，并在图表时间线上显示过去 20 年的股票价值。

正文

Cursor 是一款代码编辑器，它利用 AI 来为你编写代码，从而加速你的开发过程。

如果你还没有听说过或使用过 Cursor，我建议你在继续阅读这篇文章之前，从 cursor.com 下载它。

入门

Cursor 是一个基于 VSCode 的代码编辑器，它保留了 VSCode 的布局和快捷键，但增加了一些独特的功能，尤其是能够帮助你编写代码的人工智能助手。在本文中，我使用了 Cursor 集成的 Anthropic 的 Claude Sonnet 3.5 模型，这是一个尖端的代码生成模型。

启动 Cursor 后，你会看到类似下面的界面。在这里，我已经通过运行命令 npx create-next-app@latest 创建了一个新的 Next.js 应用。

其实，我并不熟悉 Next.js，所以这将是一个有趣的实践，看看 Cursor 会如何帮助我，即使我没有任何用 Next.js 开发的知识。

在这里插入图片描述

当你点击一个文件时，你会看到提示 CTRL + L 进行聊天，CTRL + K 生成代码，这两个是关键的键盘快捷键，让我们来了解它们各自的功能：

在这里插入图片描述

CTRL/CMD + L：这是打开左侧聊天窗口，直接与模型对话。

在这里插入图片描述

CTRL/CMD + K：这个快捷键会弹出一个窗口，让你告诉模型你想要在文件中做什么。如果你选中了一些代码，点击“生成”按钮，模型会基于这些代码生成新的代码。这样，你就可以看到代码的变化，并且可以继续与模型交流，进一步完善你的代码。

在这里插入图片描述

这里变得有趣的是，弹出窗口不仅允许你输入提示，还可以从多个来源引用文本，可以通过输入 @ 来激活。
在这里插入图片描述

@File：这个选项会列出你项目中的所有文件，你可以选择其中一个作为代码生成的上下文。
@Code：它可以从当前文件或其他项目文件中引用代码片段。
@Web：这个选项会构建一个搜索查询，从网络上获取结果，并将这些结果作为代码生成的上下文。
@Docs：列出可以获取信息的来源，包括主要框架和库的列表，你也可以添加自己的文档。
@Definitions：将源代码中附近的所有定义添加到上下文中。
@Chat：将当前对话中的消息添加到上下文中。

这些功能在你需要为 AI 助手提供额外的信息或特定的代码片段，以生成更准确和相关的代码时非常有帮助。在聊天界面中还有更多的功能选项，你可以在 @-Symbols Cursor 文档中查看完整的功能列表。

聊天窗口

聊天窗口允许你直接与模型进行对话，在这里你也可以使用 @ 符号，它还提供了一些额外的选项。

在这里插入图片描述

@Folders：这个功能允许你引用一个文件夹，并指示模型对其进行修改。
@Git：它能够识别提交记录甚至是不同的分支，这有助于模型了解其他即将发生的变更，这些变更可能已经在其他分支中开发，但尚未合并到主分支。
@Codebase：我还没有亲自尝试过这个功能，但根据文档说明，它能够让 Cursor 逐步执行，直到找到关键的代码片段来使用。

在这里插入图片描述

编写器模式

一个重要的功能仍在测试阶段，那就是编写器模式。这个模式允许你与模型进行多步骤的对话，以生成更复杂的代码。这个功能默认是不开启的，所以你需要在 文件 > 首选项 > Cursor 设置 > 功能 > 启用编写器 中手动开启它。

在这里插入图片描述

编写器模式可以通过按下 CRL/CMD + I 来激活，它会出现一个类似下面的窗口。我还没有找到方法将其显示在更大的窗口中，不确定是否可行，我个人更希望它能像聊天模式一样显示在左侧。

cursor-opening-composer

在编写器模式下，你可以利用之前提到的功能来引用项目中的其他文件。一个特别有用的功能是创建一个提示，详细列出你希望大型语言模型（LLM）遵循的所有步骤。我最近还发现了一个 cursor.directory 网站，人们可以在那里分享他们自己的提示。

创建应用

这是最有趣的部分，我想要在此前创建的 Next.js 应用基础上，构建一个功能性的应用。

以下是一个提示，用于生成一个应用，用户可以搜索任何股票市场，并在图表时间线上显示过去 20 年的股票价值。

创建一个应用，允许用户搜索市场上的任何股票，并在图表时间线上显示它们的价值。

功能需求：
- 向 package.json 添加任何新库，以便我可以轻松安装它们
- 任何新文件都应位于 /src/app 文件夹中
- 修改 /src/app 文件，以便页面直接加载股票页面
- 使用免费的雅虎财经 API，并从服务器端进行 API 调用，以避免 CORS 问题
- 如果在默认设置为暗模式的系统上打开，页面应该可以工作

cursor-composer-generate-app