Cline 新手图文教程

Cline 教程:安装配置、第一个任务、Plan/Act 模式、规则与 MCP

15 张实测截图带你上手 Cline:在 VS Code 里装好插件,用免费模型跑通第一个任务,再到 Plan/Act 双模式、Cline Rules 规则和 MCP 扩展,一步步写清楚。

要点速览

  • Cline 是运行在 VS Code 里的免费开源 AI 编程智能体:在扩展面板搜索安装,用 Google 或 GitHub 登录,不需要 API Key 就能开跑。
  • Absolutely Free 免费档内置 DeepSeek V4 Flash(100 万上下文)、GLM-5.3-Flash 等托管模型;本教程 15 步跑通一个能用的 BMI 计算器网页。
  • Plan 模式用推理模型做方案,Act 模式用快速模型写代码——示例里整轮 Plan 分析只花了 0.0145 美元。
  • 进阶三件套:自己的 Gemini Key、Global/Workspace 规则、GitHub 与 Context7 等 MCP 服务器,构成 Cline 的理想配置。

I Found 2 Ways to Use Cline for FREE (Best Free AI Coding Agent)

演示视频:HMA WebCode5:26

去 YouTube 观看

Ideal Setup for Cline

事实来源:Cline3:47

去 YouTube 观看

操作截图取自 HMA WebCode 的免费配置演示;Plan/Act 设置、规则与 MCP 市场的截图取自 Cline 官方频道短片,模式行为、规则作用域与三支柱配置等事实也以官方短片为准。

截图版权归原作者所有,此处以署名和原视频时间戳深链的方式引用;步骤文字均为本站原创。

Cline 十五步实操走查

安装 Cline,解锁免费额度

  1. 1

    在 VS Code 里安装 Cline 插件

    打开 VS Code 的扩展面板,搜索 Cline,点击 Cline Bot 发布的「自主编程智能体」条目上的 Install 安装。装好后左侧活动栏会出现 Cline 机器人图标,点开它即可在编辑器旁边打开智能体面板。

    The VS Code Extensions Marketplace search for Cline showing the Autonomous coding agent right in your IDE listing with its blue Install button
    VS Code 扩展市场里的 Cline 条目,点击 Install 即可安装。视频 0:24 处
  2. 2

    选择你的使用方式

    第一次打开面板时,Cline 会问你想怎么用它,给出四条路线:Absolutely Free(官方托管免费模型)、ClinePlans(按月订阅开放权重模型)、Frontier Model(经 Cline 计费按量付费)和 Bring my own API key(自带 Key)。新手直接选 Absolutely Free——不需要 API Key,也不用绑卡。

    Cline's first-run screen asking How will you use Cline with the four setup options Absolutely Free, ClinePlans, Frontier Model and Bring my own API key
    Cline 首次运行的选择页,四个入口一目了然。视频 0:34 处
  3. 3

    登录并进入免费档

    选择 Absolutely Free 后点击 Log in to Cline,用 Google 或 GitHub 账号登录,全程十秒左右,不要求付款方式。登录后停在 Cline Usage-Billing 供应商页面——免费模型就是由它提供的。

    Cline settings panel after signing in, with the API Provider set to Cline Usage-Billing and a blue Sign up with Cline button above the model list
    登录后看到 Usage-Billing 供应商与模型标签页。视频 1:46 处
  4. 4

    挑一个免费模型和推理强度

    打开底部模型选择器切到 Free 标签:DeepSeek V4 Flash(100 万 token 上下文)、GLM-5.3-Flash、LongCat 2.0、Laguna S 2.1 都挂着 FREE 标。多文件开发推荐 DeepSeek V4 Flash,Reasoning Effort 推理强度保持 Medium 即可——Low 更快,High 想得更深但更费 token。

    Cline settings showing the deepseek/deepseek-v4-flash model ID chosen from the Free tab with the Reasoning Effort dropdown set to Medium
    已选中 deepseek/deepseek-v4-flash,推理强度保持 Medium。视频 2:12 处

端到端跑通第一个任务

  1. 5

    打开空任务框

    在 VS Code 里新建或打开一个项目文件夹,点 Cline 图标。面板用一句提问开场——这就是所有任务的入口。面板底部是 Auto-approve 自动批准行和 Plan/Act 模式切换。

    An empty Cline task panel in VS Code with the Type your task here input and the Plan and Act mode toggle in the bottom corner
    Cline 任务面板就绪,右下角是 Plan/Act 切换。视频 2:36 处
  2. 6

    发出第一个任务

    在任务框里写清楚目标,例如:用 HTML、CSS 和 JavaScript 做一个现代风格的 BMI 计算器网页,用户输入厘米身高和公斤体重,页面给出 BMI 数值和偏瘦/正常/偏胖标签。把输入、输出、设计要求写具体,效果远好于一句话需求。

    A first Cline task asking for a modern BMI calculator web app using HTML, CSS and JavaScript typed into the chat input
    在任务框中输入 BMI 计算器需求。视频 2:58 处
  3. 7

    逐项批准(或开启自动批准)

    Cline 一步一步干活:运行命令、新建文件、修改另一个文件,每次改动都会先展示 diff。你可以逐项点 Save 或 Run Command 批准,也可以打开 Auto-approve 的 Read/Edit/Commands 让它自动跑完清单——无论哪种方式,检查点都能随时回退。

    Cline asking for approval to create index.html for the BMI calculator while the generated CSS appears as a green diff in the editor
    Cline 请求创建 index.html,编辑器里显示生成的 CSS diff。视频 3:06 处
  4. 8

    打开做好的网页

    几分钟后任务完成,给出总结和一条 BMI Calculation Checkpoint 检查点记录。用 Live Server 或任意静态服务器打开生成的 index.html 实测:输入 175 厘米、70 公斤,页面算出 BMI 22.9——正常。没手写一行代码,一个能跑的网页就到手了。

    The finished BMI Calculator web app running in a browser next to VS Code with Cline's completion summary and BMI Calculation Checkpoint in the panel
    浏览器里跑着做好的 BMI 计算器,VS Code 里是 Cline 的完成总结。视频 3:17 处

Plan/Act 双模式,省 Token 不返工

  1. 9

    认识 Plan 和 Act 双模式

    面板底部的开关在 Plan 和 Act 之间切换。Plan 模式下 Cline 只做调研:读文件、提问题、给出实施计划。设置里有两个同名标签页,可以给两种模式各配一个模型——Plan 用强推理模型,Act 用快速编码模型。

    Cline's settings dialog showing the Plan Mode and Act Mode tabs above the API Provider and Model dropdowns used to split reasoning and coding models
    Cline 设置里的 Plan Mode / Act Mode 标签,可为两种模式分别选模型。视频 0:48 处
  2. 10

    让 Plan 模式先想清楚再动手

    推理模型擅长 Plan 模式,因为拆解任务是分析活不是打字活。此时还没写代码,完整调研很便宜——示例里整轮 DRY 违例分析只花 0.0145 美元。它提问时认真回答,这里的每一次纠偏都在替后面的返工省钱。

    A Cline Plan mode analysis listing DRY violations with the task's token count, context window and 0.0145 dollars API cost shown on the task card
    Plan 模式任务卡:分析结果、token 用量和 0.0145 美元的 API 花费。视频 1:10 处
  3. 11

    切到 Act 模式开始写代码

    方案满意后切到 Act——计划被锁定,Cline 开始动手改文件。编码模型在这一步更快更便宜,这正是双模式省 token 的原因。任务恢复页上还标注了快捷键:Win+Shift+A 可在两种模式间切换。

    Cline settings with the Act Mode tab selected and the claude-3-7-sonnet model chosen for code generation, with extended thinking available below
    设置里选中 Act Mode 标签,为执行阶段选好编码模型。视频 1:28 处

自己的 Key、规则与 MCP 市场

  1. 12

    或者自带免费 Key

    不想用共享免费池?选择 Bring my own API key,供应商选 Google Gemini,然后到 Google AI Studio 点 Get API key 生成密钥——免费档只需要一个 Google 账号。把 Key 粘进 Cline 的 API Key 输入框,选一个 Gemini 模型保存,从此跑在自己的专属额度上。

    Google AI Studio's Create API key dialog where a free Gemini key is generated for Cline's Google Gemini provider field
    在 Google AI Studio 的 Create API key 弹窗里生成免费 Gemini Key。视频 3:54 处
  2. 13

    用规则教会 Cline 你的规范

    规则是 Cline 每个任务都会读取的持久指令。打开面板设置里的 Rules 标签:Global Rules 对你机器上所有项目生效,Workspace Rules 以 .clinerules 文件存在当前仓库里,可以提交给团队共享。编码原则、安全实践、文档规范、代码风格都适合写进规则。

    The Rules tab in the Cline panel settings with the Global Rules and Workspace Rules sections for adding persistent guidance files
    Cline 设置中的 Rules 标签,含 Global Rules 与 Workspace Rules 两节。视频 1:06 处
  3. 14

    写模型真正能执行的规则

    模糊的规则会适得其反——「尽量优化代码」等于给 Cline 留了忽视你的余地。改成可度量的触发条件:单元测试超过 100 毫秒就优化、写类时遵循 SOLID 原则、代码做了假设时补内联注释。把规则当活文档维护,定期清理互相冲突的条目。

    A Cline rule file open in VS Code with three measurable rules such as optimizing code when unit tests take longer than 100 milliseconds
    一份包含三条可度量规则的文件,Cline 每个任务都会遵守。视频 1:45 处
  4. 15

    用 MCP 服务器扩展 Cline

    点面板里的 MCP Marketplace 图标,一键安装给 Cline 加能力的服务器:GitHub 管仓库操作,Context7 提供最新库文档,Perplexity 和 Sequential Thinking 负责调研与规划。装好后批准其工具,Cline 就能在任务中途调用——这是理想配置的第三根支柱。

    Cline's MCP Servers marketplace with the Marketplace, Remote Servers and Installed tabs and the GitHub MCP server card ready to install
    Cline 的 MCP Servers 市场,GitHub 服务器卡片就在首页。视频 2:44 处

Cline 新手常见问题

继续阅读