前言
Cursor 作为 AI 编程的得力助手已经是家喻户晓，本文介绍它的竞品。新的 AI 代码编辑器——Windsurf ！它和 Cursor 一样可以：
- 让 AI 帮你写代码
- 可以上传 UI 稿，生成指定 UI 代码
- 一键继承 VS Code 配置
- 免费试用 2 周的 AI 付费模型（Claude 3.5 Sonnet、GPT 4o）
而且它有：
- 无限的 Claude 3.5 Sonnet
- 完整的上下文范围
- continue 智能修改代码
- 一个月 $10（ Cursor 是 20$）
显然，这些功能已经远超 Cursor 了……
之前笔者在群里提到 Cursor 时，很多朋友也尝试起来，而且真的有朋友分享了自己全用 AI 做出的应用，真的很 nice。也有朋友遇到安装问题，索性以这篇文章带大家过一遍，并且使用它一键生成 Web 应用。
如何安装？
进入官网：https://docs.codeium.com/windsurf/getting-started
1️⃣ 在官网的 Set Up 部分根据自己的系统来选择合适的安装包（安装的过程略）：
2️⃣ 双击应用图标打开编辑器，看到如下界面：
3️⃣ 点击「Get Started」按钮，进入初始化页面，在这里就能一键从 VS Code 中引入配置：
- Import from VS Code（从 VS Code 中引入，这是我们想要的！）
- Import from Cursor（从 Cursor 中引入）
- Start fresh（重新开始）
4️⃣ 点击「Import from VS Code」后，是一系列的设置：
- 选择迁移范围（导入设置和插件）：
- 选择编辑器主题：
5️⃣ 最后一步是注册并登录，一开始我们没有账号，这里点击「Sign up」注册帐号：
点击后会自动使用 Chrome 帐号进行登录，然后显示已经注册成功：
然后重定向回 Windsurf 编辑器（如果编辑器没有响应，那么关掉重开即可），可以看到整个编辑器和 VS Code 几乎是一模一样的：
- 左侧是 VS Code 的侧边栏，与 Cursor 相比更加符合 VS Code 的风格
- 中间是代码编辑区域，有两个任务需要完成
- 右侧的 Cascade 是和 Cursor 类似的 AI 助手，在这个面板中，我们可以与之对话并指挥它干活。
完成两个任务
在代码编辑区域，Windsurf 给出了两个任务：
1️⃣ 使用 Cascade 编码（command + L）
打开右侧 AI 面板其实就是第一个任务，先把右侧 AI 面板关闭再按下组合键「command + L」完成任务。
2️⃣ 打开命令面板（shift + command + P）
和 VS Code 一样，在这个命令面板中可以输入相关命令执行，不同的第一行就是 Windsurf 提供的打开 Cascade AI 面板。这样第二个任务也完成了。
有什么功能？
打开 Cascade 面板：
模型选择
如图，默认情况下，Windsurf 使用「Claude 3.5 Sonnet」模型：
也可以切换成别的，如 GPT 4o 或 Cascade Base：
编写/聊天模式
编写模式
代码辅助方式有两种，一种是编写模式，这也是默认方式：
在这种方式下，Cascade 可以直接修改我们的代码，快捷键为「command + .」。
划重点：make changes across your entire codebase，这意味着它可以对整个代码库进行改动。
然而，这种模式的切换在 Cursor 中需要每次手动进行：
聊天模式
另一种为聊天模式，同样点击右下角按钮切换：
这种模式将会围绕我们的代码库或一般编码原则的问题进行优化，比如：提出问题或寻求建议。
划重点：for your codebase，即使是聊天模式，也可以对整个代码库进行优化。而 Cursor 在聊天模式下只是针对一般的代码片段或是某些代码文件提出建议。
不写一行代码生成一个 2048
这里笔者尝试使用它的测试用例来生成一个 2048 小游戏。
切换到编写模式，然后点击：Try it out with a test workspace：
这里选择项目创建的位置，然后点击下面创建一个 2048 app，而且动画要丝滑：
之后代码就会自动生成：创建 2048 目录 > 创建代码文件 > 写入代码，最后等待你的确认：
当然它除了写代码，在 Cascade 面板区域会给出本次生成代码的关键信息：
我们接受它的所有改动，点击右下角的「Accept all」：
最后，在本地运行代码打开浏览器，笔者忍不住按照 README 提示试玩了一下：
图片上传
一旦我们拥有 UI 稿，只要一键上传图片给 Cascade，它就可以生成对应代码。比如我要生成一个 Vue3 app，并让它帮我生成一个登录页面。
通过点击「Add Images」将登录页面上传给 Cascade：
直接访问工具和终端
因为需要使用终端，因此每一步会询问开发者是否要运行此命令：
运行的输出内容也会出现在下方：
由此可见，它可以直接访问工具和终端。
如此这般，随着整个项目文件的不断生成，需要我们手动审查代码，没问题后可以点击向右箭头进入到下一个改动的文件中：
最后，会要求我们启动项目，在 http://localhost:5173/ 可以看到效果：
效果如图所示，有些瑕疵，但瑕不掩瑜：
实时协作 continue
Windsurf 和 Cascade 能够感知上下文的变化，比如对于上面的 Vue3 应用中的 LoginView.vue 文件，我想要将变量名
showPassword 改为 passwordVisible：
代码中使用了多次，在 Cascade 面板中输入
continue，AI 会帮助我们完成变量修改，这就免除了手动修改会出现的潜在 bug 问题。
回退到上一步
回退是编程中非常需要的一项功能，在鼠标悬浮在提示上就会出现回退按钮。
比方说我想撤回刚刚变量的修改，点击回退按钮：
它会出现提示（注意：这个操作是不可逆的！）：
点击之后，刚刚
continue 的部分就消失了。代码编辑区域的感知也很灵敏，当我想把刚刚自己手动修改的 showPassword 改回去时，它直接出现了提示：
重新运行项目，一切正常！
总结
掌握了 Windsurf 和 Cascade 这些功能，快速生成一个应用不在话下，如它的名字「帆板」一般，祝你写代码和冲浪一样一帆风顺！下一篇，笔者计划介绍如何将本地代码提交到远程，以及部署前端代码的几种常见方式（Github、Vercle、Netlify、Docker 等），欢迎各位跟进。
- 作者:菠萝的蜜
- 链接:https://blog.miaoosi.com/efficiency-tools/article/generate-2048-game-with-windsurf-with-one-click
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
