Vibe Coding 环境搭建 (6)：Cline + VS Code AI开发工作流

Oct 24, 2025

# Cline + VS Code AI开发工作流

# Cline是什么？

Cline是一个AI编程助手，它知道如何让AI帮我们写代码。

# 为什么选择Cline？

在vibe coding的世界里，Cline 是最强大的AI编程助手之一。它可以：

  • 开源免费，我们不需要为这个工具付费
  • BOK模式，即Cline可以让我们自己选择用哪个AI模型。比如说我们可以用 Deepseek，也可以用Qwen. 我们只需要把我们在对应AI平台上的Key添加进去就可以。（提供Key的模型会按照token的使用量来计费）
  • Cline也会作为模型供应商来提供一些模型，并且经常有一些模型是免费的（至少在2025年的9月和10月份是免费的）

# 环境配置

# 1. 安装Cline

首先，需要安装VS Code，请参阅VS Code 编辑器安装指南

然后，登录Cline官网

点击右上角 Account 按钮注册账号并登录

最后，回到Cline官网主页，点击 Install Cline 按钮，然后选择 VS Code 进行Install

# 2. 配置API Keys

安装完成后，需要配置AI模型的API Keys：

  1. 打开Cline设置

    • VS Code中打开Cline面板，点击面板右上角的齿轮图标，进入 Settings 界面

  2. 添加API Keys

    • 在设置中找到 "API Provider"
    • 选择你想使用的AI模型（如OpenAI、Anthropic、DeepSeek等）

请注意，如果你在这一步选择的 API Provider 是 Cline，那么你就不需要执行下面两步从第三方获取 API Keys，你只需向Cline付费。

但是，如果你选了Cline之后，在下方的 Model 中选择了一个有free标识的模型，那么你就不需要付费了。

在我写下这篇文章的时候，Cline自带的模型有四个：

  • anthropic/claude-sonnet-4.5
  • anthropic/claude-haiku-4.5
  • x-ai/grok-code-fast-1
  • cline/code-supernova-1-milion

其中，x-ai/grok-code-fast-1 和 cline/code-supernova-1-milion 都是免费的

  1. 获取API Keys

  2. 输入API Key

    • 将获取到的API Key粘贴到Cline设置中
    • 点击保存

# 基本使用方法

# 1. 打开Cline面板

安装完成后，VS Code会自动添加Cline图标到侧边栏。 点击侧边栏的Cline图标即可打开Cline面板。

# 2. 开始对话

  1. 创建新对话

    • 直接在聊天框中输入prompt
    • 或者点击cline面板的 + 号，开启新的会话

  2. 描述你的需求

    • 用自然语言描述你想要实现的功能
    • 例如："描述当前项目" 或者："在xxx页面中添加一个xxx按钮"

  3. AI生成代码

    • Cline会分析你的需求并生成相应的代码
    • 代码会自动应用到你的项目中

# 3. 代码执行和测试

Cline可以：

  • 自动运行终端命令来安装依赖
  • 执行测试命令验证代码
  • 修复代码中的错误和警告

# 工作流程示例

# 示例1：创建新项目

  1. 描述需求：

     开发一个web应用，它的核心功能是XXXX
 它需要有一个顶部栏和一个侧边栏，其余是页面主体部分。
 侧边栏承担导航作用，导航项分别是XXXX
 采用现代web技术栈，优先考虑使用react、nextjs、tailwind、lucide
 如果本地尚未安装所需依赖，请安装它们
 take a deep breath and do it step by step

  2. Cline会：

    • 创建项目结构
    • 初始化package.json
    • 安装必要依赖
    • 创建基础组件

  3. 结果：几分钟内就能得到一个可运行的完整应用

# 示例2：修复bug

  1. 描述问题：

    程序出现了报错，错误信息如下：
xxxxxxxxxxx

  2. Cline会：

    • 分析代码逻辑
    • 识别问题
    • 提供修复方案
    • 应用修复并验证

# 示例3：添加功能

  1. 描述需求：

    给这个用户列表组件添加搜索功能

  2. Cline会：

    • 分析现有代码结构
    • 设计搜索逻辑
    • 实现搜索组件
    • 集成到现有代码中

# 高级功能

# 1. 准备环境

虽然前几个章节我们讲述如何安装node.js、Python等，但其实Cline也可以帮我们做这些。
并且，如果我们需要用npm或pip安装一些库或包，cline也可以帮我们完成。

# 2. 代码解释

可以让Cline解释某一个代码文件的功能和逻辑。

# 3. 单元测试生成

Cline可以为你的代码自动生成单元测试，确保代码质量。

# 4. 文档生成

可以让Cline为你的代码生成README文档和其他技术文档。

# 最佳实践

# 1. 清晰的指令

  • 用具体的语言描述需求
  • 提供上下文信息
  • 说明期望的结果格式

# 2. 分步骤进行

  • 将复杂任务分解成小步骤
  • 每个步骤完成后检查结果
  • 逐步构建复杂功能

# 3. 代码审查

  • 让Cline解释生成的代码
  • 检查是否有潜在问题
  • 验证代码风格一致性

# 4. 版本控制

  • 重要修改前先提交代码
  • 使用有意义的提交信息
  • 定期备份重要代码

# 常见问题

# 1. Cline持续重复地修改某一处代码，似乎陷入了死循环

问题：大概率是上下文太长导致的模型崩溃
解决：

  • 开启新的会话

# 2. Cline删除了某一个代码文件中的大部分内容，然后生成不了新的内容

问题：模型崩溃，并且很糟糕地弄丢了我们原有的代码
解决：

  • 尽快点击Cancel按钮，暂停Cline当前的工作
  • 尝试用cmd+z（在Windows上是ctrl+z），回退变更找回原有代码
  • 非常重要 最安全的做法是用git，每个阶段性的成果都把代码commit到git仓库进行保存

# 3. AI的功能设计和开发方向明显偏离了预期

问题：大模型的输出有着不确定性，shit happens sometimes
解决：

  • 如果Cline还在继续工作，点击“Cancel”按钮停止其当前的工作
  • 回退到最近一次git提交的令人满意的版本
  • 开启新的会话

# 4. Cline在执行任务的时候经常报告Cline has auto-approved 20 API requests...

问题：连续20次自动执行之后，Cline需要确认一下你是否还在电脑边
解决：

  • 点击 Proceed 按钮（解决当前问题）
  • 设置更大的auto-approved数字

# 总结

Cline是vibe coding的核心工具，它让AI编程变得简单高效：

  • ✅ 智能代码生成：根据自然语言描述生成高质量代码
  • ✅ 自动执行：安装依赖、运行测试一键完成
  • ✅ 多模型支持：自由选择最适合的AI模型
  • ✅ 完整工作流：从需求到部署的完整开发流程

虽然本文介绍的是Cline，但我也建议你尝试一下别的AI编程工具，例如Cursor、Trea、Claude code等

# 总结

你已经完成了环境搭建，以及在AI的辅助下进行开发的能力。接下来可以学习：

  • 项目部署：将代码部署到服务器
  • CI/CD：持续集成和部署
  • 性能优化：网站性能提升
  • 安全测试：Web 安全检查

恭喜！你已经完成了 Vibe Coding 环境搭建的完整系列！ 🎉

现在你已经掌握了：

  • ✅ VS Code 编辑器配置
  • ✅ Git 版本控制
  • ✅ Node.js 和 npm 环境
  • ✅ Python 和 pip 工具
  • ✅ 终端命令行操作
  • ✅ Cline的安装与使用

开始你的 vibe coding 之旅吧！🚀