一、背景
“种一棵树的最好时间是十年前，其次是现在。从现在开始AI学编程。”
原本我已经准备发布一个关于Cursor的小白AI开发教程，但Windsurf的出现让我忍不住暂停了这个计划。
Windsurf的初次体验超出了我的预期。当我以试试看的心态用Windsurf重构原本的Cursor项目时，整个过程出乎意料地顺畅。它就像一位深谙你心意的搭档，不仅让环境配置变得轻松自如，还在代码理解和上下文感知上展现出令人惊叹的能力。与Cursor一样，Windsurf也提供了免费的 GPT-4o 和 Claude 3.5 Sonnet 模型，并且有免费的使用期。
卓越的上下文理解能力
- 项目结构识别：Windsurf能够自动识别项目的所有重要信息，包括目录结构、文件依赖关系等。
- 跨文件上下文追踪：它不仅局限于当前文件，还能在整个项目中追踪上下文，理解跨文件依赖和模块间调用。
强大的功能特性
- AI智能代理：Windsurf的AI代理可以在特定任务中“自己动手”，如调试、重构代码等，自动完成一些重复性操作。
- Cascade模式：提供编辑和聊天两种模式，编辑模式可以生成和修改代码，聊天模式专注于提供开发建议、解答代码问题。
广泛的应用支持
- 多语言支持：支持超过70种编程语言和框架，适用于前端、后端和数据科学等方向。
- 跨平台兼容性：支持Windows、Mac和Linux平台，能够无缝集成在常用的开发环境中。
我用Windsurf快速开发的学习网站，耗时仅30分钟。
二、操作步骤
2.1 准备工作
安装Windsurf IDE
- 官网下载安装包：codeium.com
- 安装Windsurf IDE并进入初始化设置。
- 账号注册/登录。
- 进入开发主界面。
熟悉界面
Cascade（Ctrl+L）
右侧的Cascade像Cursor的composer，如果你没用过Cursor也没关系，我来给你解释一下。
这个功能可以直接在项目里面编辑代码文件。与Cursor不同的是，Cascade将功能分成了两类：纯Chat模式和Write模式。
- Chat模式：不会帮你往项目里写入代码，而是会做一个细心的助理，协助你处理问题。
- Write模式：像得力的助手，直接将生成的代码放入项目中。
自然语言修改代码（Ctrl+i）
2.2 启动开发
开发目标：以“Windsurf学习共创社区”为例，我们将完整演示如何借助AI能力快速构建现代化Web应用。
- 技术选型：Vue + TypeScript（常用的前端框架，具体可以先不用知道啥意思）。
- 目标用户：零基础开发学习者。
- 参考项目：Cursor101。
开发流程：
接下来，我将贴上与Cascade交互的关键步骤，跟着我的提示照做，就能达到类似最终的效果：
- 输入需求，让Windsurf进行代码生成。
- Windsurf会详细讲解开发思路，并给出环境命令，你只需不断接受即可。
- 无需打开终端配置环境，直接编写代码。
- 如果出现报错，将报错信息返回给Cascade。
- 经过自动检查后，给出bug所在，访问给的 http://localhost:5173，成功运行。
- 进一步让Windsurf进行优化，注意一步一步来，以便及时更正AI。
我们的网页已经初具雏形，接下来只需优化具体细节。
优化导航栏的细节以及首页（PS：生成失败时它还会自我反思调整，太强了~）
- 插入细节图片。
- 不断调整细节中（PS：想要更精准的控制要改的范围，记得在Cascade里@原来的文件）。
三、总结
功能演示
四、总结
小贴士
- 设计参考：可让AI分析优秀页面设计并转化为实现方案。
- 渐进式开发：采用小步快跑策略，便于及时纠错。
- 精准控制：通过@文件名实现精确代码修改。
🏆
优势所在
- 超强的上下文追踪能力。
- 自动识别项目重要文件。
- 强有力的对抗性思考助力程序开发，开发者更省心。
有待提升
- Cascade的交互无法用图片，只能文字，这个比Cursor的composer缺少一点感觉，未来如果能加上就更好了。
后续还会有更多关于AI编程的理论篇和实战篇，敬请期待……