一、背景
"种一棵树的最好时间是十年前,其次是现在。从现在开始AI学编程"
本来已经写了一个cursor的小白AI开发教程准备发布,Windsurf的横空出世让我忍不住按下了暂停键。
Windsurf初次体验,它带给我的惊喜远超预期,当我抱着试试看的心态用Windsurf重构原本的Cursor项目时,整个过程出乎意料的顺滑。不夸张地说,它就像一位深谙你心意的搭档,不仅让环境配置变得轻松自如,在代码理解和上下文感知上更是展现出令人惊叹的能力,同样他与cursor一样存在提供了免费的 GPT-4o 和 Claude 3.5 Sonnet 模型,并且有免费的使用期
卓越的上下文理解能力
- 项目结构识别:Windsurf 能够自动识别项目的所有重要信息,包括目录结构、文件依赖关系等。
- 跨文件上下文追踪:它不仅局限于当前文件,还能在整个项目中追踪上下文,理解跨文件依赖和模块间调用。
强大的功能特性
- AI智能代理:Windsurf 的 AI 代理可以在特定任务中“自己动手”,如调试、重构代码等,自动完成一些重复性操作。
- Cascade 模式:提供编辑和聊天两种模式,编辑模式可以生成和修改代码,聊天模式专注于提供开发建议、解答代码问题。
广泛的应用支持
- 多语言支持:支持超过 70 种编程语言和框架,适用于前端、后端和数据科学等方向。
- 跨平台兼容性:支持 Windows、Mac 和 Linux 平台,能够无缝集成在常用的开发环境中。
我30分钟用windsurf快速开发的windsurf学习网站
二、操作步骤
2.1 准备工作
安装Windsurf IDE
- 官网codeium.com下载安装包(https://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进行code
- windsurf会事无巨细的将开发的思路讲解出来,并且贴心的给你把环境命令打出来,你只需要不断accept点点鼠标就行
- 无需打开终端配置环境,我们就直接把代码写好了
- 但是很有可能,会出现报错,但是没关系,我们把报错信息返回给cascade
- 经过自动检查后,给出bug所在,访问给的http://localhost:5173,成功run起来了
- 但是这远远不够,我们可以进一步让windsurf进行优化,但是要注意一步一步来,这样的好处可以验证每一步的成果,以便及时更正AI,这部可能要等一会儿,有点慢,windsurf的编码速度测试下来不如cursor,在每一步都有可能报错,继续返回给AI
- 我们的网页已经初具雏形,接下来只需要优化具体细节
- 优化导航栏的细节以及首页(PS:生成失败他还会自我反思调整,太强了~)
- 插入细节图片
- 不断调整细节ing~~~(PS想要更精准的控制要改的范围记得在cascade里@原来的文件)
三、总结
功能演示
四、总结
一点小tips:
设计参考:可让AI分析优秀页面设计并转化为实现方案
渐进式开发:采用小步快跑策略,便于及时纠错
精准控制:通过@文件名实现精确代码修改
🏆
优势所在
🙉
有待提升
- 超强的上下文追踪能力
- 自动识别项目重要文件
- 强有力的对抗性思考助力程序开发,开发者更省心
- Cascade的交互无法用图片,只能文字,这个比cursor的composer缺少一点感觉,以后如果能加上就更好了
后续还会有更多关于AI编程的【理论篇】和【实战篇】敬请期待……
📌
嗨,我是Yeadon!作为一名人工智能专业的大三学生,正在努力成为AI时代的超级个体~
欢迎志同道合的朋友通过微信【vip2022shopee】交流讨论!