开源VS Code AI Agent插件，让AI在VS Code中获得自主能力——创建文件、运行终端命令、浏览器调试。自带API Key可免费体验，支持Claude/GPT/Ollama多模型切换。
Cline（原名Claude Dev）是开源的VS Code AI Agent扩展，GitHub星标超50k。与普通AI助手不同，Cline是一个真正的Agent——它能自主创建/编辑文件、运行终端命令、启动浏览器调试。每步操作都需你确认后才执行，安全可控。支持Claude、GPT、Ollama、OpenRouter等多种模型。
自主创建/编辑/删除文件、运行终端命令、浏览器调试，每步操作需你确认
AI自动启动浏览器访问应用，截图分析页面问题，提出并应用修复方案
Claude/GPT/Ollama/OpenRouter/自定义API，灵活切换，自带免费额度
自动读取项目文件结构、package.json等，理解项目上下文后精准修改
每步操作都需你确认，可随时拒绝执行，文件修改可一键回退
支持Model Context Protocol，可连接外部工具和数据源扩展能力
| 模型提供商 | 推荐模型 | 特点 |
|---|---|---|
| Anthropic | Claude 3.5 Sonnet | 代码能力最强，Agent体验最佳 |
| OpenAI | GPT-4o | 综合能力强，生态成熟 |
| OpenRouter | 多模型可选 | 一个Key访问多模型，性价比高 |
| Ollama | DeepSeek Coder | 完全本地运行，隐私安全 |
| Cline自带 | 内置模型 | 注册即用，免费额度体验 |
只需3步，5分钟完成安装和配置，开始你的AI Agent编程之旅。
# 确保已安装VS Code
# 下载地址：
https://code.visualstudio.com/
# 验证安装
code --version
# 应输出类似：1.95.0
# 如果命令行无法使用code命令：
Mac: Cmd+Shift+P → 输入 "Shell Command" → Install 'code' command
Win: 安装时勾选 "添加到PATH"建议使用VS Code 1.90+版本以获得最佳兼容性。可在Help → About中查看版本号。
# 方式一：VS Code扩展市场（推荐）
1. 打开VS Code
2. 按 Ctrl+Shift+X（Mac: Cmd+Shift+X）打开扩展面板
3. 搜索框输入 "Cline"
4. 找到作者为 "Saoud Rizwan" 的扩展
5. 点击 Install 按钮
# 方式二：命令行安装
code --install-extension saoudrizwan.claude-dev
# 方式三：VSIX文件安装
1. 从GitHub Releases下载.vsix文件
2. VS Code → Ctrl+Shift+P → "Install from VSIX"
3. 选择下载的文件# 安装成功后：
1. VS Code左侧活动栏出现Cline图标（紫色机器人）
2. 点击图标打开Cline面板
3. 首次打开会引导你配置API Key
# 也可以通过命令面板打开：
Ctrl+Shift+P → 输入 "Cline: Open"Cline支持多种AI模型，选择最适合你的方案进行配置。
# 零配置，注册即用
1. 打开Cline面板
2. 选择 "Use Cline API"
3. 注册Cline账号（GitHub/Google登录）
4. 获得免费额度，直接开始使用
# 免费额度有限，适合体验
# 需要更多额度可购买Cline Pro首次使用建议先选自带API Key体验功能，熟悉后再切换到自己的API Key获得更好体验。
# 获取Anthropic API Key
1. 访问 https://console.anthropic.com/
2. 注册账号并登录
3. 进入 API Keys 页面
4. 点击 "Create Key" 创建新密钥
5. 复制密钥（只显示一次！）
# 在Cline中配置
1. 打开Cline面板
2. 点击设置图标 ⚙️
3. Provider 选择 "Anthropic"
4. 粘贴API Key
5. Model 选择 claude-3-5-sonnet-20241022
6. 点击 SaveAnthropic API按使用量计费，Claude 3.5 Sonnet约$3/百万输入token。建议设置Usage Limit避免超支。
# 1. 安装Ollama
Mac: brew install ollama
Win: 从 https://ollama.com 下载安装包
Linux: curl -fsSL https://ollama.com/install.sh | sh
# 2. 拉取代码模型
ollama pull deepseek-coder-v2
# 或
ollama pull codellama:34b
# 3. 启动Ollama服务
ollama serve
# 4. 在Cline中配置
1. Provider 选择 "Ollama"
2. Base URL: http://localhost:11434
3. Model: deepseek-coder-v2
4. 点击 Save本地模型需要至少16GB内存。DeepSeek Coder V2是目前最强的开源代码模型，推荐优先使用。如果机器配置较低，可以用qwen2.5-coder:7b。
# 获取OpenRouter Key
1. 访问 https://openrouter.ai/
2. 注册并充值（最低$5）
3. 创建API Key
# 在Cline中配置
1. Provider 选择 "OpenRouter"
2. 粘贴API Key
3. Model 选择推荐模型：
→ anthropic/claude-3.5-sonnet (最强)
→ deepseek/deepseek-chat (最便宜)
→ google/gemini-2.0-flash (免费额度)# 打开Cline面板，输入需求：
👤 在当前项目中创建一个用户注册页面，
包含：用户名、邮箱、密码输入框，
表单验证逻辑，提交后调用API
# Cline会自动执行：
Step 1: 读取项目结构，了解技术栈
Step 2: 创建 RegisterPage.jsx 文件
Step 3: 添加表单验证逻辑
Step 4: 创建API调用函数
# 每一步都会弹出确认框：
[Allow] [Deny]
# 点击Allow允许执行，Deny拒绝# Cline可以自主操作文件：
创建文件： AI自动创建新文件并写入代码
编辑文件： AI在现有文件中添加/修改代码
删除文件： AI删除不需要的文件（需确认）
# 操作确认机制：
• 每次文件操作前都会显示diff预览
• 绿色=新增内容，红色=删除内容
• 你可以逐个确认或一键全部允许
• 误操作可通过Git回退建议项目使用Git版本控制，这样Cline的任何修改都可以轻松回退。在重要项目上建议逐个确认操作。
# Cline可以直接运行终端命令：
👤 安装lodash并创建一个工具函数文件
# Cline会执行：
$ npm install lodash
# 弹出确认框，你确认后执行
# 常用命令场景：
• npm install / pip install 安装依赖
• npm run dev 启动开发服务器
• npm run build 构建项目
• git add / git commit 版本控制
• python script.py 运行脚本Cline执行终端命令前会显示完整命令让你确认。请仔细检查命令内容，特别是涉及删除（rm）、修改系统文件等危险操作。
# Cline能自动启动浏览器调试UI：
👤 启动开发服务器，检查页面效果
# Cline会自动：
1. 运行 npm run dev 启动服务
2. 打开浏览器访问 localhost:3000
3. 截图分析页面效果
4. 发现问题并提出修复方案
5. 应用修复并重新截图验证
# 典型场景：
👤 页面的按钮样式不对，帮我修复
# Cline截图→分析→修改CSS→验证
👤 移动端布局有问题，修复响应式
# Cline切换到移动端视图→分析→修复# 在对话中引用项目文件给Cline参考：
👤 参考 @src/utils/api.js 的风格，
创建 @src/services/user.js
# 引用方式：
@文件路径 → 引用指定文件内容
@文件夹 → 引用文件夹下所有文件
Ctrl+Shift+@ → 快速选择文件
# 常用场景：
• "参考 @App.jsx 的组件风格"
• "根据 @types/api.d.ts 修改实现"
• "按照 @README.md 的规范重构"跟着这个案例，用Cline从零创建一个完整的RESTful API项目。
👤 在当前目录创建一个Express + TypeScript的RESTful API项目：
- 使用Express + TypeScript + Prisma ORM
- 数据库用SQLite（开发环境）
- 包含用户CRUD接口
- JWT认证中间件
- 错误处理中间件
- 请求参数验证
- 项目结构要清晰规范# Cline自动执行（每步需你确认）：
Step 1: 初始化项目
→ npm init -y
→ 安装 express, typescript, prisma 等依赖
[Allow] ✓
Step 2: 创建项目结构
→ src/index.ts - 入口文件
→ src/routes/userRoutes.ts - 路由
→ src/controllers/userController.ts - 控制器
→ src/middleware/auth.ts - JWT认证
→ src/middleware/errorHandler.ts - 错误处理
[Allow] ✓
Step 3: 初始化Prisma
→ npx prisma init --datasource-provider sqlite
→ 定义User模型schema
→ npx prisma generate
[Allow] ✓
Step 4: 编写核心代码
→ 实现CRUD接口
→ 添加JWT认证
→ 参数验证
[Allow] ✓
# 全程约5-8分钟# 让Cline帮你测试API：
👤 启动服务器并测试所有接口
# Cline会：
1. 运行 npm run dev 启动服务
2. 用curl测试每个接口
3. 报告测试结果
4. 发现问题自动修复
# 继续迭代：
👤 添加分页查询功能
👤 添加用户角色权限
👤 添加API文档，使用Swagger1）复杂需求拆分成小步骤，逐步让Cline完成 2）每次修改后让Cline运行测试 3）重要操作前先Git commit 4）善用@引用让Cline理解项目上下文 5）浏览器调试功能是修复UI问题的利器。