Cline 入门:在 VS Code 里用 Plan/Act 模式让 AI 帮你写代码

发布时间:2026/10/28 0:07:06
Cline 入门:在 VS Code 里用 Plan/Act 模式让 AI 帮你写代码 适合人群已经装了 VS Code想试试让 AI 直接在项目里读代码、改文件、跑命令但又担心 AI 乱改代码的编程初学者。本文介绍开源编程智能体 Cline 的基本用法安装、接入模型、用 Plan/Act 模式完成小项目、用检查点回退。Cline 以 Apache-2.0 协议开源提供 VS Code 扩展也支持 Cursor、Windsurf、VSCodium 等、JetBrains 插件、命令行和桌面应用。它默认每一步都要你批准创建、修改文件或执行命令前都会先给你看。本文用一个场景贯穿小陈想做一个单页的番茄钟网页用来练习 HTML 和 JavaScript。一、在 VS Code 中安装 Cline打开 VS Code按 CtrlShiftXmacOS 为 CmdShiftX打开扩展面板搜索 Cline在 Cline 扩展上点安装安装后在左侧活动栏找到 Cline 图标打开 Cline 面板。Windsurf 和 VSCodium 使用 Open VSX 扩展市场安装流程相同。命令行版本需要 Node.js 20 及以上用npm install -g cline安装本文以编辑器扩展为例。二、选择模型提供方Cline 本身不带模型需要接入一个提供方。官方给出三条常见路线Cline 按量计费用 Google、GitHub 或邮箱登录无需管理密钥ClinePass按月订阅官方标价每月 9.99 美元自带密钥填写 Anthropic、OpenAI、Gemini、DeepSeek 等的 API Key或接入本机的 Ollama、LM Studio无需密钥。操作步骤点 Cline 面板里的齿轮图标进入设置在 API Provider 下拉框选提供方按提示登录或粘贴 API Key再在 Model 下拉框选模型。价格和可选模型变化较快以官方页面为准。三、打开项目文件夹发出第一个任务先用“文件 → 打开文件夹”打开一个空文件夹Cline 会把它当作工作区。然后在 Cline 面板底部的输入框里写任务用一个 HTML 文件做一个番茄钟网页25 分钟专注、5 分钟休息 有开始、暂停、重置按钮倒计时数字居中显示样式简洁 JavaScript 和 CSS 都写在同一个文件里。四、先 Plan再 Act面板底部有一个 Plan / Act 切换按钮这是 Cline 最重要的设计Plan 模式Cline 可以读代码、搜索、和你讨论方案但不能修改任何文件也不能执行命令Act 模式按讨论好的方案改文件、跑命令并保留 Plan 阶段的对话上下文。建议先在 Plan 模式里让它说说准备怎么写你可以追问或修改需求觉得没问题再切到 Act。官方建议小修小改直接 Act涉及多个文件的功能先 Plan 再 Act大型改动用 /deep-planning 做更细的规划。五、审批每一次改动Act 模式下Cline 准备创建 index.html 时会展示文件路径和代码新增行标绿下方有批准和拒绝按钮点批准才会写入拒绝后可补充要求。终端命令同理。写好后用浏览器打开 index.html 测试。想继续改就在同一个对话里追加比如“倒计时结束时响一下提示音”Cline 会读取现有代码并以差异形式给出修改。六、改坏了就用检查点回退检查点默认开启。Cline 每次改文件、跑命令后会在独立的影子 Git 仓库里保存快照不影响你自己的 Git 历史。对话里每个步骤旁边有两个按钮Compare打开差异视图看这一步改了什么Restore恢复到这一步可以选择只恢复文件、只恢复对话或者两者一起恢复。选项叫法在官方不同页面略有差异以界面为准。初学者最常用“只恢复文件、保留对话”然后让 Cline 换一种写法。七、用规则和斜杠命令减少重复交代“注释用中文”“不要引入第三方库”这类固定要求可以写成规则放在项目根目录 .clinerules 文件夹里的 Markdown 文件每次对话自动读取也兼容 AGENTS.md 等文件。输入 /newrule 可让 Cline 引导创建。几个常用斜杠命令命令作用/newtask提炼当前进度开一个新任务/smol压缩对话历史别名 /compact/newrule创建规则文件/deep-planning先调研代码再出详细计划反复执行的固定流程可以做成 Skill技能用斜杠命令触发写法见官方文档。常见问题问自动批准Auto Approve要不要打开答官方建议的默认配置是只开“读取项目文件”编辑、命令、浏览器和 MCP 先保持关闭如果开启编辑配合检查点使用。设置里还有 YOLO 模式会自动批准所有操作官方明确提示有风险初学者不建议开。问大仓库里感觉 Cline 变慢了答检查点每一步都会保存快照仓库很大时可能占空间、拖慢速度可以在设置的 Feature Settings 里关闭 Enable Checkpoints。小贴士第一次用建议在一个练习文件夹里操作熟悉审批流程后再用于正式项目。检查点不能代替 Git重要节点仍然要自己提交。使用付费模型时留意用量长任务适时用 /newtask 或 /smol 控制上下文。参考资料Cline 官方文档安装、授权、Plan Act、检查点、自动批准、规则与命令等章节 https://docs.cline.botCline 开源仓库说明Apache-2.0 协议

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询