匠人学院 JR Academy学AI来匠人
匠人学院 JR Academy学AI来匠人

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-airwallex.png/image/layout/pay-alipay.png
EN

关于公司

关于我们元宇宙课堂新闻资讯匠人工作成为导师匠人导师联系我们匠人商店J3.Club

匠人资源

匠人活动1对1私教行业白皮书线上学习平台面试中心分享面试经验Internship会员中心

AI 工具

AI 工具箱考证匠 Cert Master求职匠 Job Hunter牛小匠 UniMate AI

AI 学习方向

全部学习方向AI EngineerContext EngineeringVibe CodingPrompt MasterAI BuilderAI 产品经理Python 入门

AI 应用提效

AI 办公提效AI 数据分析AI 财务AI 内容创作AI 视觉创作前端开发Hermes AgentOpenClaw 本地智能体

大学资源

墨尔本大学昆士兰大学新南威尔士大学悉尼大学莫那什大学阿德莱德大学RMITQUTUTS

少儿 AI 教育

Airbotix 少儿 AI 编程澳洲家长实用资料库NAPLAN 成绩单怎么看My School 学校数据指南悉尼私校学费 2026少儿编程课程与训练营

移民服务

澳洲移民技术移民189/190/491雇主担保482/186/494投资移民188/888英国移民美国移民加拿大移民

企业合作

P3职业孵化器Enterprise (EN)企业培训实习合作招聘合作申请合作

求职代理

岗位代投职位监控LinkedIn代运营LinkedIn人脉代加了解P3项目

匠人支持

FAQsTerms & ConditionsPrivacy PolicyCancellation & Refund PolicySite map

Top Categories

Web全栈班DevOps项目班数据工程全栈班数据分析项目班编程入门班Business Analyst实习算法集训营

求职就业

BA和产品经理实习数据科学实习数据分析实习Marketing实习简历修改面试指导导师指导VIP

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 2, 171 La Trobe St, Melbourne VIC 3000
四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号
Business Hub, 155 Waymouth St, Adelaide SA 5000

联系方式

hello@jiangren.com.au0421-672-555

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2026 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572

首页学习AI课程考证

探索匠人

登录,继续你的学习课程、学习记录与账号
AI for Business企业培训与 AI 落地
我的学习会员联系我们
首页/资源中心/文章详情
JR Academy · Blog职业洞察

Cline 实战手册:开源免费的 VS Code AI 编程 Agent — 核心功能深度解析

Plan/Act 双模式、MCP 工具市场、Browser 自动化、Context 上下文管理全面拆解

发布日期2026-10-25
阅读时长1 分钟
作者

快速导航

  • Plan 模式:先想清楚再动手
  • Act 模式:自主执行任务
  • MCP 集成:给 Agent 装外挂
  • Browser 自动化
  • Context 上下文管理

Plan 模式:先想清楚再动手

Plan 模式是 Cline 区别于大多数 AI 编程工具的设计。开启后 Cline 只做分析、不改代码——它会读文件、梳理依赖、列出修改方案,但一行代码也不碰。

适合这些场景:

  • 接手陌生项目,先让 Cline 跑一遍了解结构
  • 做复杂重构前,让它列出所有受影响的文件和修改顺序
  • 评估某个需求的实现方案——给它需求描述,它会分析技术可行性
# Plan 模式 prompt 示例
我想给这个 Next.js 项目加 i18n 支持(中文和英文)。
请分析目前的项目结构,列出需要改哪些文件、用什么库、大概分几步实现。
先不要动代码。

Plan 模式输出会是一份结构化的执行计划——文件列表、修改顺序、潜在风险。你觉得计划合理了,再切到 Act 模式让它执行。

Act 模式:自主执行任务

Act 模式下 Cline 会真正动手:创建文件、修改代码、跑终端命令、读报错、自动修复。它的 Agent 循环会持续运行,直到任务完成或遇到需要你决策的地方。

Cline Act 模式执行任务流程

Act 模式能做的事:

能力 说明
创建/编辑文件 展示 diff 预览,你确认后才写入
运行终端命令 npm install、git commit、pytest 等
读取命令输出 看 build 报错、test 结果、lint 警告
自我修复 发现报错自动分析原因、改代码、重试
搜索代码库 按语义找相关文件,不只是文本搜索

一个真实的工作流:

# 给你的 React 项目加暗黑模式
给这个 React 项目加 dark mode 支持:
1. 用 CSS 变量定义亮色/暗色主题
2. 加一个切换按钮在右上角
3. 用 localStorage 记住用户选择
4. 默认跟随系统设置
做完跑一下 dev server 看看效果

Cline 会分多轮执行:先创建 CSS 变量文件,再改布局组件加切换按钮,然后加 localStorage 逻辑,最后跑 npm run dev 并用内置浏览器截图验证效果。

MCP 集成:给 Agent 装外挂

MCP(Model Context Protocol)是 Anthropic 推出的开放协议,让 AI Agent 能调用外部工具。Cline 内置了 MCP 市场,一键安装各种 server:

┌─ MCP 市场热门工具 ────────────────────────┐
│                                           │
│  🗄  Postgres / Supabase   → 查数据库     │
│  📋  Jira / Linear         → 管理任务     │
│  ☁️  AWS / Azure           → 操作云资源   │
│  🧪  Playwright            → 端到端测试   │
│  📊  GitHub                → 管理仓库     │
│  📝  Notion                → 读写文档     │
│  🔍  Brave Search          → 联网搜索     │
│                                           │
└───────────────────────────────────────────┘

安装方式:打开 Cline 侧边栏顶部的 MCP 图标,浏览市场,点 Install。或者直接在对话里说「帮我装一个 Postgres MCP server」,Cline 会自动配置。

更厉害的是,你可以让 Cline 自己创建 MCP server:

我需要一个 MCP 工具,能查询我们公司的 Confluence wiki。
用 Confluence REST API,支持按关键词搜索和获取页面内容。
帮我从头搭建这个 MCP server。

Cline 会生成脚手架代码、写工具定义、配置连接、安装到本地,全自动。

Browser 自动化

Cline 内置浏览器控制能力,能在开发过程中直接验证 UI:

  • 打开页面:localhost:3000 或任意 URL
  • 截图:对当前页面截图分析
  • 交互:点击按钮、填写表单、滚动页面
  • 读取控制台:捕获 console.log 和报错信息

这意味着 Cline 做完前端改动后能自己开浏览器看效果,如果 UI 不对还能自动调整。不用你手动刷新页面截图发给 AI。

# 让 Cline 自己验证前端效果
加完 dark mode 后,帮我打开 http://localhost:3000,
截个图看看亮色和暗色模式的效果对不对。
如果有 UI 问题就直接修。

Context 上下文管理

Cline 用 @ 引用来精准控制上下文:

引用方式 作用 示例
@file 把某个文件加入上下文 @src/utils/auth.ts 这个鉴权逻辑有 bug
@folder 把整个文件夹加入 @src/components/ 帮我重构这些组件
@url 爬取网页内容 @https://docs.stripe.com/api 参考这个文档接 Stripe
@problems VS Code 问题面板 @problems 帮我修这些 lint 错误

最佳实践:不要一次给太多上下文。精准 @ 两三个关键文件,比让 Cline 自己搜索全项目更快更准。上下文越精准,生成的代码越靠谱,token 消耗也越少。

作者
一键分享或复制链接
← 上一篇Cline 实战手册:开源免费的 VS Code AI 编程 Agent — 安装配置与第一个项目下一篇 →Cline 实战手册:开源免费的 VS Code AI 编程 Agent — 进阶技巧与实战案例

相关文章推荐

2027 AI Engineer完整能力图谱!

2026-10-26

DP-700 Fabric Data Engineer 考纲 10 月刷新;Office LTSC 2021 支持终止;Hugging Face 12 门 AI 课全免费

2026-10-26

GitHub Copilot 实战指南 — 常见问题、定价与选型建议

2026-10-25

GitHub Copilot 实战指南 — 进阶玩法:Coding Agent、自定义指令与 MCP

2026-10-25

GitHub Copilot 实战指南 — 核心功能深度解析:补全、Chat 与 Agent Mode

2026-10-25

GitHub Copilot 实战指南 — 快速上手:注册免费版 + 第一次 AI 编程

2026-10-25
查看全部文章 →
JR Academy
全球华人学习 AI 第一站
训练营免费资源AI学习职业辅导
精选推荐
AI 职业影响地图
测测你的职业风险等级,查看转型路径与学习方向
热门工具
AI & 数据训练营
系统化课程 + 真实项目实战,快速提升竞争力
热门课程
1v1 就业辅导
资深导师一对一指导,简历优化 + 面试准备
职业辅导
企业内训定制
AI 技能培训方案,助力团队升级
企业服务
热门标签
Vibe CodingAI 编程CursorClaude求职攻略Prompt前端开发后端开发
订阅更新

获取最新 AI 学习资源、技术教程和求职攻略,直接送达邮箱。

我们尊重您的隐私,不会发送垃圾邮件