!!!###@@@提示词 Cursor + Windsurf

在 AI 编程领域,不管是IDE编辑器还是IDE插件,出了很多的产品,比如全球爆火的 Cursor,微软的 Copilot,还有国产的 豆包MarsCode 等等,效果都很不错。今天向大家推荐一款可以平替Cursor的AI编辑器Windsurf。Windsurf是由Codeium团队开发的一款新型AI编程助手,旨在通过深度集成AI技术提升开发者的编码效率。它不仅在上下文理解、工具链集成和智能编程助手方面表现出色,还提供了丰富的功能和灵活的协作模式。同样他与Cursor一样存在提供了免费的 GPT-4o 和 Claude 3.5 Sonnet 模型,并且现在是完全的免费使用。

Windsurf的特点

AI智能代理:

Flows = Agents + Copilots

Windsurf采用了AI Flow范式,支持多步骤、多工具协同,自动维护上下文状态,智能任务规划和执行。可以像 Copilot 一样与你协作,也可以像 Agent 一样独立处理复杂的任务。

flow

Cascade 模式

提供编辑和聊天两种模式,编辑模式可以生成和修改代码,直接将生成的代码写入到对应的文件,聊天模式专注于提供开发建议、解答代码问题。

内置代码搜索

  1. 分析工具文件系统操作

  2. 管理命令行集成

  3. 自动化智能代码编辑和重构

上下文理解能力

Windsurf的上下文引擎能够更深入地理解项目代码关系,提供更智能的代码建议。它不光补全你正在写的代码,还能预测你接下来要写什么。

Windsurf的安装和使用

install

运行Windsurf后,看到下面的页面

welcome

设置流程:

如果想使用VS Code的配置,可以选择从VS Code导入,也可以选择重新开始配置Windsurf。如果你选择了重新开始,那么后续该如何导入VS Code配置哪,Windsurf提供了从控制面板重新添加的入口。(在 Mac 上为 ⌘+⇧+P,在 Windows/Linux 上为 Ctrl+Shift+P)并输入“import from VS Code”。

setup

import-vscode

选择编辑器的主题

从这些默认值中选择你最喜欢的颜色主题!别担心,以后可以随时更改此设置。请注意,如果你从 VS Code 导入,则导入的主题将覆盖此主题。

theme

注册/登录

要使用 Windsurf,需要使用 Codeium 帐户。

auth

主界面:

img

Cascade(command+L、ctrl+L)

Cascade将功能分成了两类,一个是Chat模式,一个是Write模式,

Chat模式:在Chat模式时,只是作为一个贴心的助理,协助你处理问题

chat2

Write模式: 在Write模式,直接将生成的代码写入到项目中。

img

自然语言修改代码(Cmd+i):支持在选中代码的时候,使用自然语言修改对应的代码。

img

通过上面的介绍,简单知道了Windsurf的简单实用,下面我将使用使用Windsurf编写一个个人网站

这样我的网站就有了基础的框架,只是现在的样式还不符合我们的要求,不过没有关系我们可以一点一点让windsurf进行优化,慢慢的变成我们想要的样子。

web1

web2

继续给Windsurf提示词,让他进行分析当前项目,并继续改造

经过几次的对话,对具体的细节进行不断的调整,Windsurf就生成了我们所想要的效果。

WX20241124-171150

成果展示:

demo

总结:

通过上面对Windsurf的简单介绍和实际例子的使用,大家可以清晰地了解到其强大的功能和灵活的应用场景。在实际工作中,根据自己的业务需求,巧妙地运用Windsurf可以帮助开发者快速编写一些基础的代码。

Windsurf:超越 Cursor 的下一代 AI 编辑器在 AI 编程领域,不管是IDE编辑器还是IDE插件,出了很 - 掘金

我使用 Cursor 的一些场景与技巧快捷键 Cmd + L:对话功能的核心入口 Cmd + L 是 Cursor 中最 - 掘金

快捷键

Cmd + L:对话功能的核心入口

Cmd + L 是 Cursor 中最常用的快捷键组合,包含两种模式:

  • Cmd + L:启动全新的 Chat 对话面板
  • Cmd + Shift + L:重新打开上一次的 Chat 面板,保留历史对话记录

在日常工作中,我对 Cmd + Shift + L 的使用频率更高,因为它能够保持对话上下文,帮助 AI 更准确地理解当前需求,提供更符合预期的代码建议。

需要注意的是,当你修改了 Cursor Chat 建议的代码后,继续使用 Cmd + Shift + L 可能会导致 AI 忽略你的修改,仍基于原始代码继续生成代码。这种情况下,建议使用 Cmd + L 开启新对话,确保 AI 基于最新代码提供建议。

Cmd + K:轻量级助手

Cmd + K 虽然上下文信息较少,但在特定场景下非常实用:

  • 文档写作时的语言优化和润色
  • 在终端中快速将自然语言转换为命令行指令

代码重构指南

Cursor 在代码重构方面提供了强大的支持。以下是几个常用的重构场景:

  1. 代码优化:可以让 Cursor 对现有代码进行优化建议:
  1. 请检查这段代码中的变量命名,使其更具描述性和可读性
  2. 请将这些变量名改为更符合业务语义的命名
  3. 请检查这段代码的性能问题,并给出优化建议
  1. React 组件优化:Cursor 可以帮助优化 React 组件中的状态和副作用:
  1. 请检查并优化这个组件中的状态和副作用的声明顺序与命名规范
  2. 请分析这些 useEffect 的依赖项是否合理,是否需要拆分或合并
  1. 提取函数/组件:当你想要将一段代码提取为独立的函数或组件时,只需选中相关代码,然后在 Chat 中描述你的意图,如:

请将这段代码提取为一个独立的函数,命名为 handleUserAuth

如果需要将提取的函数/组件移动到其他文件中,可以在 Chat 中输入:

将这段代码提取为一个独立的函数,命名为 handleUserAuth,并将其移动到 @src/utils/auth.ts 文件中

代码审查的最佳实践

在日常使用 Cursor 编辑器时,我们可能会遇到一个棘手的问题:使用 Tab 键自动补全或 Chat 功能时,有时会意外删除重要的代码行。这种细微的改动往往难以通过常规的代码审查发现,却可能导致严重的程序错误。

为了有效预防这类问题,Cursor 提供了强大的 Review 面板功能,让我们能够实时监控代码变更,快速发现并纠正潜在问题。

Cursor 的代码审查面板

基于"小步提交"的理念,我们推荐采用以下双层代码审查策略:

  1. 增量审查:每完成一个独立的功能模块后,立即在 Review 面板中选择 Review Working State 选项,对工作区代码进行全面检查。确认无误后,使用 git add 将变更添加到暂存区。避免无法快速区分代码是 cursor 自动修改还是人为修改。
  2. 提交前审查:在执行 git commit 前,切换到 Review 面板,选择 Review Diff with Main Branch 选项(需手动将比较基准设置为 Main 分支的 HEAD)。这一步可以清晰地看到与主分支的代码差异,确保所有变更都符合预期。

这种分层的审查机制能够显著提升代码质量,最大限度地降低意外代码删除或修改带来的风险。

自动化测试与文档生成

Cursor 不仅是一个代码编辑器,更是开发流程自动化的得力助手。当我们开发新的 API 功能时,Cursor 可以协助完成单元测试编写和文档生成工作。

例如,在实现新功能后,可以向 Chat 发出如下指令:

我刚实现了 @debounce 函数,请参考 @throttle.spec.ts 的测试用例,在 @debounce.spec.ts 中编写对应的单元测试,并在 @Readme.md 中更新相关文档。

Cursor 会自动分析上下文中的 @debounce.spec.ts 和 @Readme.md 文件,生成符合项目规范的测试代码和文档内容。

智能文档集成

Cursor 文档集成功能

Cursor 提供了灵活的文档索引配置功能。通过 Cursor Settings,你可以自定义需要索引的文档资源,并在编码过程中通过 @doc 语法快速引用这些文档。

值得注意的是,在处理某些库的文档时可能需要特别注意版本问题。以 @tanstack/react-query 为例,由于 Claude 可能只熟悉较早版本的 API,直接使用可能会导致版本不匹配的问题。这种情况下,我们可以在文档索引中将其重命名为 react-query,然后通过 @react-query 来引用最新版本的文档。

建议优先为以下场景配置文档索引:

  • 新发布的技术文档(Cursor 尚未收录)
  • 小众技术库的文档
  • 项目相关的 GitHub Issues

Cursor 初体验 & rules 推荐作为一名后端程序员,对前端不甚了解,有时却不得不需要定制化前端页面(学生党课设 - 掘金

Cursor 初体验 & rules 推荐

使用背景

  • 作为一名后端程序员,对前端不甚了解,有时却不得不需要定制化前端页面(学生党课设)
  • 快速完成后端项目的搭建
  • 对于一些简单通用的模块快速提供基本逻辑的实现
  • 进行代码诊断,发现 bug / 优化

于是打开了 Cursor 的大门。

基本用法

首先,在官网 www.cursor.com/ 下载。

默认需要 ctrl + i 调出与 AI 对话的功能,我们可以设置(as panel)成嵌入在右边的模式。

然后直接和 AI 对话即可,非常简单

  • 对于你接受的代码,选择 accept
  • 不符合预期的代码,选择 reject,尝试再优化你的意思的表达

image-20241116233914632

方便的版本控制:Checkpoint

在 accept all 以后,可能会有需要回滚的场景,比如 Cursor 生成的代码不符合预期。

每次在 Cursor 处理完你的问题后,都会生成一个 checkpoint,此时点击边上的 checkout,即可跳转到当前版本。而不需要自己 git commit,非常方便。

配置项

一般来说,Cursor 默认的配置就足够好用,当然你可以定制化自己需要的配置,配置项不多也不复杂,你可以在官网的 doc 中找到详细的说明。

我这里就说一下 features - Iterate on lints ,打开后有时可以自动识别代码错误并修正,但存在 bug,会一直重复提示一个不存在的编译错误,可能会使得 LLM 处理”支线“而非”主线“,所以看情况开关。

prompt 发挥的关键作用

prompt 是一种用于指导AI模型生成所需输出的“输入方式”,通常为一段文本或信息,在 Cursor 中也就是我们输入的所有文本。

虽然 Cursor 入门使用非常简单,但只有合适的 prompt 才能让 Cursor 做出符合你预期的行为。

如何优化 prompt

关键的问题是:如何把需求表达得足够清楚?怎样优化你的 prompt?

下面是我做的一个优化 prompt 的总结:

1、大多数模型对英文的理解能力更强,对于这些模型尽量使用英文交互;

2、用 xml、json 等 LLM 更易理解的数据格式;

3、用尽量少的 token ,表达最清晰的意思;

4、用列表的形式,列清优化的大方向,有助于引导 LLM;

5、请求 LLM 的文本和 LLM 返回的结果,都需要显式给出格式规范等;

6、长文本的结果往往会不准确,需要找准一个合理的经验值。

下面给出一个 prompt 的例子,来源于吴恩达的开源项目 Translation Agent,供大家参考:

 
vbnet
代码解读
复制代码
 # 以列表的形式,强调了从准确性 (accuracy)、流畅度 (fluency)、风格 (style) 和术语 (terminology)四个方面来优化翻译结果。
 Your task is to carefully read a source text and a translation from {source_lang} to {target_lang}, and then give constructive criticism and helpful suggestions to improve the translation. \
 {country_specific}
 The source text and initial translation, delimited by XML tags <SOURCE_TEXT></SOURCE_TEXT> and <TRANSLATION></TRANSLATION>, are as follows:
 ​
 <SOURCE_TEXT>
 {source_text}
 </SOURCE_TEXT>
 ​
 <TRANSLATION>
 {translation_1}
 </TRANSLATION>
 ​
 When writing suggestions, pay attention to whether there are ways to improve the translation's \n\
 (i) accuracy (by correcting errors of addition, mistranslation, omission, or untranslated text),\n\
 (ii) fluency (by applying {target_lang} grammar, spelling and punctuation rules, and ensuring there are no unnecessary repetitions),\n\
 (iii) style (by ensuring the translations reflect the style of the source text and takes into account any cultural context),\n\
 (iv) terminology (by ensuring terminology use is consistent and reflects the source text domain; and by only ensuring you use equivalent idioms {target_lang}).\n\
 ​
 Write a list of specific, helpful and constructive suggestions for improving the translation.
 Each suggestion should address one specific part of the translation.
 Output only the suggestions and nothing else.
# 以列表的形式,强调了从准确性 (accuracy)、流畅度 (fluency)、风格 (style) 和术语 (terminology)四个方面来优化翻译结果。
你的任务是仔细阅读源文本和从{source_lang}到{target_lang}的翻译,然后给出建设性的批评和有用的建议来改进翻译。\
{country_specific}
以XML标记<SOURCE_TEXT></SOURCE_TEXT>和< translation ></ translation >分隔的源文本和初始翻译如下:
​
< SOURCE_TEXT >
{source_text}
< / SOURCE_TEXT >
​
<翻译> 
{translation_1}
</翻译> 
​
在写建议的时候,要注意是否有办法改进翻译的\n\
(i)准确性(通过纠正添加、误译、遗漏或未翻译文本的错误),\n\
(ii) 流畅性(通过应用{target_lang}语法、拼写和标点规则,并确保没有不必要的重复),\n\
(iii)风格(确保译文反映源文本的风格,并考虑到任何文化背景),\n\
(iv)术语(确保术语的使用是一致的并反映源文本领域;并且只需要确保你使用等价的习语{target_lang})
​
写一个清单,具体的,有用的和建设性的建议,以提高翻译。
每个建议都应该针对翻译的一个特定部分。
只输出建议,不输出其他内容。

rules:优化你的 Cursor

现在你应该对如何写 prompt 有了一个初步的了解,但是,每次和 Cursor 交互都要加很多重复性的东西,未免太过麻烦,比如:

  • 请在关键步骤写注释
  • 请使用 SpringBoot2.7.2 版本
  • 请不要擅自修改 pom.xml

针对这一些通用的 prompt,Cursor 提供了一个解决方案:rules

Cursor 官方是这样介绍 rules 的:

 
css
代码解读
复制代码
 You can add custom instructions to Cursor by modifying the Rules for AI section under Cursor Settings > General > Rules for AI.

您可以通过修改“光标设置>通用> AI规则”中的“AI规则”部分,为光标添加自定义指令。

 

总之,rules 可以引导 Cursor 的表现,达到和 prompt 类似的效果。因此,针对一些通用的 prompt,只需要配置 rules 即可,不需要每次交互都携带上。

rules 有两种使用方式:全局粒度 rules 和项目粒度 rules。下面分别介绍使用方法。

1、全局 rule:Rules for AI

点击右上角设置 - General - Rules for AI 修改即可。

全局 rule 一般写全局通用的 rules,比如:

  • 代码注释规则
  • 输出关键日志信息

2、项目粒度:.cursorrules 文件

首先需要把 Rules for AI 下面的这个功能打开

image-20241116235656891

然后编写 .cursorrules 文件放在项目内即可。

修改 rules:reload window

如果中途修改了 rules,记得 reload window 以确保 rules 生效

image-20241119101057842

reload 不会影响你之前和 Composer 的所有对话,依然保留

rules 推荐

下面推荐一些 rules 供大家参考

 
vbnet
代码解读
复制代码
 # 源自:https://www.youtube.com/watch?v=YozWFvkUMcQ
 DO NOT GIVE ME HIGH LEVEL STUFF, IF I ASK FOR FIX OR EXPLANATION, I WANT ACTUAL CODE OR EXPLANATION!!! I DON'T WANT "Here's how you can blablabla"
 ​
 - Be casual unless otherwise specified
 - Be terse
 - Suggest solutions that I didn’t think about—anticipate my needs
 - Treat me as an expert
 - Be accurate and thorough
 - Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer
 - Value good arguments over authorities, the source is irrelevant
 - Consider new technologies and contrarian ideas, not just the conventional wisdom
 - You may use high levels of speculation or prediction, just flag it for me
 - No moral lectures
 - Discuss safety only when it's crucial and non-obvious
 - If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward
 - Cite sources whenever possible at the end, not inline
 - No need to mention your knowledge cutoff
 - No need to disclose you're an AI
 - Please respect my prettier preferences when you provide code.
 - Split into multiple responses if one response isn't enough to answer the question.
   If I ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make. Multiple code blocks are ok.
不要给我高水平的东西,如果我要求修复或解释,我想要实际的代码或解释!!我不想听“你可以这样说”
​
-除非另有说明,否则要随意
-简洁
-提出我没有考虑到的解决方案——预测我的需求
-把我当成专家
-准确而彻底
-立即给出答案。提供详细的解释,如果有必要的话,在给出答案后用你自己的话重述我的问题
-重视好的论点而不是权威,来源是无关紧要的
-考虑新技术和逆向思维,而不仅仅是传统智慧
-你可能会使用高度的猜测或预测,为我标记它
-没有道德说教
-只在至关重要且不明显的时候讨论安全问题
-如果您的内容策略存在问题,请提供最接近可接受的响应,然后解释内容策略问题
-尽可能在最后引用来源,而不是行内引用
-没必要提及你的知识门槛
-没有必要透露你是一个AI
-当你提供代码时,请尊重我的prettier偏好。
-如果一个回答不足以回答问题,则将其分成多个回答。
如果我要求调整我提供给你的代码,不要不必要地重复所有代码。相反,尽量保持简短的回答,在你做任何修改之前或之后只写几行。多个代码块是可以的。
 
matlab
代码解读
复制代码
 如果你使用 Java 构建后端,请遵循以下需求:
 - 使用 Java8(JDK1.8)
 - 使用 SpringBoot2.7.2
 - SpringBoot 的配置文件使用 application.yml,而不要用 application.properties
 - 使用 maven 进行项目依赖管理
 - 使用 MyBatis / MyBatis-Plus 进行数据库操作
 - 可以使用 Lombok
 - 使用标准的错误响应格式
 - 在合适的地方加注释,目标是只看注释就能大概知道一个方法的作用
 - 严格禁止使用 baseMapper ,必须属性注入 mapper 再进行操作
 - 前后端交互时,在处理时间格式时需要特别注意

不懂代码也能做应用?AI 代码编辑器 Cursor 快速上手指南Cursor 是一个基于 VSCode 的代码编辑器,是 - 掘金

快速阅读

  1. Cursor 是一个基于 VSCode 的代码编辑器,它保留了 VSCode 的布局和快捷键,但它结合 LLM 增加了一些独特的功能,是一个能够帮助你编写代码的人工智能助手。
  2. 除了介绍 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 开发的知识。

cursor-home-screen.png

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

cursor-options-to-generate-code.png

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

cursor-ctrl-cmd-plus-l.png

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

cursor-ctrl-cmd-plus-k.png

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

cursor-options-when-typing-at.png

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

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

聊天窗口

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

cursor-chat-window-with-options.png

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

cursor-chat-git-and-docs.png

编写器模式

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

cursor-composer-mode-activation.png

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

【视频居然还要上传西瓜才能插入,没有注册过西瓜视频,这里就不上传了,可以关注一下我的公众号@蚝油菜花,同样可以找到这篇文章,视频支持在线播放哦~】

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

创建应用

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

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

 
code
代码解读
复制代码
创建一个应用,允许用户搜索市场上的任何股票,并在图表时间线上显示它们的价值。

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

【视频居然还要上传西瓜才能插入,没有注册过西瓜视频,这里就不上传了,可以关注一下我的公众号@蚝油菜花,同样可以找到这篇文章,视频支持在线播放哦~】

资源

cursor.com ( www.cursor.com )

@-Symbols Cursor 文档 ( docs.cursor.com/context/@-s… )

cursor.directory ( cursor.directory/ )

Cursor – Overview

拥抱AI编程工具Cursor 提高编码效率在日常的文本编辑和代码编写中,如何高效地定位、选中、批量编辑文字内容是提升工作 - 掘金

Cursor Directory最近太火爆了!提供各种编程语言的Cursor 配置文件和提示词库前言 在最近的开发者圈子 - 掘金

 

posted @ 2025-04-11 10:11  CharyGao  阅读(298)  评论(0)    收藏  举报