2026 最新！VSCode 安装 Claude Code 插件超详细教程（附 FreeModel API 配置）

笙-

1977人浏览 · 2026-06-12 13:54:27

笙- · 2026-06-12 13:54:27 发布

VSCode 安装 Claude Code 插件超详细教程

本教程将带你从零开始，完整配置 VSCode + Claude Code 插件 + FreeModel.dev API 中转站

预计耗时: 15-20 分钟
难度: ⭐⭐☆☆☆（新手友好）

📋 目录

一、准备工作
二、注册 FreeModel.dev 账号
三、获取 API Key
四、安装 VSCode
五、安装 Claude Code 插件
六、配置 API 连接
七、首次使用测试
八、实际使用
九、高级功能配置
十、故障排查
十一、最佳实践建议

📊 整体安装流程图

下面是完整的安装配置流程，帮助你一目了然地了解所有步骤：

一、准备工作

1.1 系统要求

系统	要求	状态
Windows	10/11	✅ 支持
macOS	10.15+	✅ 支持
Linux	Ubuntu 18.04+	✅ 支持
WSL2	Ubuntu 20.04+	✅ 支持

1.2 需要安装的软件

Visual Studio Code（必须）
- 下载地址：https://code.visualstudio.com/
- 选择对应系统的安装包
网络连接
- 需要能够访问 https://freemodel.dev
- 如无法访问，需要配置代理

1.3 检查 VSCode 版本

打开 VSCode，按 Ctrl+Shift+P，输入 About，查看版本：

关于 Visual Studio Code
版本: 1.90.0 或更高（推荐）

如版本过低，请更新到最新版。

二、注册 FreeModel.dev 账号

2.1 打开官网

打开浏览器（推荐 Chrome/Edge）
访问：https://freemodel.dev
点击右上角 Sign Up 或注册按钮

2.2 选择注册方式

FreeModel.dev 提供以下注册方式：

方式 A：邮箱注册（推荐）

输入你的邮箱地址
点击 Send Verification Code（发送验证码）
查看邮箱，获取 6 位验证码
输入验证码
设置登录密码（8 位以上，含字母 + 数字）
点击 Register 完成注册

方式 B：GitHub 快捷登录

点击 Continue with GitHub
授权 FreeModel.dev 访问你的 GitHub 账号
自动完成注册

方式 C：Google 快捷登录

点击 Continue with Google
选择你的 Google 账号
授权完成注册

2.3 另一个方法（验证码发不过来的）：

注意：中转站不太稳定有的用户可能无法获取到验证码
1.点击购买第一份额度（或者左侧点击用量）
在这里插入图片描述

你输入的是30其实充值的是9元
之后就能使用获取api了
附：可以邀请新用户登录成功后双发都会获得10元额度

2.4 完善个人信息

注册成功后，建议完善：

昵称
头像（可选）
时区设置（建议选择 Asia/Shanghai）

三、获取 API Key

3.1 进入 Dashboard

登录 https://freemodel.dev
点击右上角头像
选择 Dashboard 或 控制台

3.2 找到 API 管理页面

在 Dashboard 左侧菜单中，找到：

API Keys 或 API 管理
点击进入

3.3 创建新的 API Key

点击 Create New Key 或 创建新密钥
输入密钥名称（如：VSCode-ClaudeCode）
选择权限范围（建议）：
- ✅ Read（读取）
- ✅ Write（写入）
- ⚠️ Admin（管理员，一般不需要）
点击 Create

3.4 复制并保存 API Key

⚠️ 重要：API Key 只显示一次！

页面会显示类似这样的密钥：
```
sk-fm-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```
立即点击 Copy 按钮复制
粘贴到安全的地方（推荐密码管理器）
同时记录 API Base URL（通常是 https://api.freemodel.dev/v1）

3.5 查看配额和余额

在 Dashboard 中可以查看：

剩余额度：$XX.XX
今日调用次数：XXX/XXX
模型可用列表：查看哪些模型可用

四、安装 VSCode

4.1 Windows 系统安装

访问 https://code.visualstudio.com/
点击 Download for Windows
运行下载的 .exe 安装程序
安装选项建议：
- ✅ 添加到右键菜单
- ✅ 创建桌面快捷方式
- ✅ 关联 .code-workspace 文件
点击安装，等待完成

4.2 macOS 系统安装

访问 https://code.visualstudio.com/
点击 Download for Mac
打开下载的 .zip 文件
将 VSCode 拖拽到 Applications 文件夹
在 Launchpad 中打开 VSCode

4.3 Linux 系统安装

Ubuntu/Debian:

# 下载并安装
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/code stable main"
sudo apt update
sudo apt install code

其他方式:

# Snap
sudo snap install code --classic

# Flatpak
flatpak install flathub com.visualstudio.code

4.4 首次启动配置

打开 VSCode
选择颜色主题（推荐 Dark+）
选择文件图标主题（推荐 Default）
安装推荐扩展（可跳过）

五、安装 Claude Code 插件

5.1 推荐插件列表

以下插件都支持 OpenAI 兼容 API，可以连接 FreeModel.dev：

插件名称	插件 ID	推荐度	特点
Cline	`saoudrizwan.claude-dev`	⭐⭐⭐⭐⭐	最流行，功能全面
Claude Dev	`anthropic.claude-dev`	⭐⭐⭐⭐	官方风格
Codeium	`Codeium.codeium`	⭐⭐⭐⭐	免费额度多
Continue	`continue.continue`	⭐⭐⭐⭐	开源可定制

5.2 安装方法一：通过扩展市场（推荐）

打开 VSCode
按 Ctrl+Shift+X（Mac: Cmd+Shift+X）打开扩展面板
在搜索框输入 Cline
找到 Cline - Claude for VSCode（作者：saoudrizwan）
点击 Install 按钮
等待安装完成（约 10-30 秒）
安装成功后，右侧会出现 Cline 的图标（🤖）

5.3 安装方法二：手动安装 .vsix 文件

如无法访问扩展市场：

访问 https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev
点击 Download Extension 下载 .vsix 文件
在 VSCode 中按 Ctrl+Shift+P
输入 Extensions: Install from VSIX...
选择下载的 .vsix 文件
点击安装

5.4 安装方法三：命令行安装

# 先找到 VSCode CLI 路径
# Windows:
code --install-extension saoudrizwan.claude-dev

# macOS:
/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code --install-extension saoudrizwan.claude-dev

# Linux:
code --install-extension saoudrizwan.claude-dev

5.5 验证安装成功

安装完成后，VSCode 右侧边栏会出现 Cline 图标（机器人头像）
点击图标，会打开 Cline 对话面板
第一次打开会提示配置 API，点击 Settings

六、配置 API 连接

6.1 打开 Cline 设置

点击右侧边栏的 Cline 图标（🤖）
在 Cline 面板中，点击右上角的 ⚙️ 设置 图标
或者按 Ctrl+Shift+P，输入 Cline: Settings

6.2 配置 API Provider

在设置页面中找到 API Provider 或 模型提供商：

下拉选择 OpenAI Compatible 或 Custom API
不要选择 Anthropic（那是官方 API）

6.3 填写 API 信息

必填项：

字段	填写内容	示例
API Base URL	FreeModel 的 API 地址	`https://api.freemodel.dev/v1`
API Key	你复制的密钥	`sk-fm-xxxxxxxxxxxxxxxx`
Model ID	模型名称	`claude-sonnet-4`

选填项（高级配置）：

字段	推荐值	说明
Max Tokens	`8192`	单次响应最大 token 数
Temperature	`0.7`	创造性（0-1，越高越随机）
Timeout	`60`	请求超时时间（秒）

6.4 通过 settings.json 配置（高级）

按 Ctrl+Shift+P
输入 Open Settings (JSON)
在打开的 settings.json 文件中添加：

{
  // Cline 插件配置
  "cline.apiProvider": "openai-compatible",
  "cline.apiEndpoint": "https://api.freemodel.dev/v1",
  "cline.apiKey": "sk-fm-你的 API Key",
  "cline.modelId": "claude-sonnet-4",
  "cline.maxTokens": 8192,
  "cline.temperature": 0.7,
  "cline.timeout": 60,
  
  // 可选：系统提示词
  "cline.systemPrompt": "你是一个专业的编程助手，请用中文回答。",
  
  // 可选：代理配置（如需要）
  "http.proxy": "http://127.0.0.1:7890",
  "https.proxy": "http://127.0.0.1:7890"
}

按 Ctrl+S 保存

6.5 使用 .env 文件存储密钥（推荐）

为安全起见，不要将 API Key 直接写在 settings.json 中：

在项目根目录创建 .env 文件：

# .env
FREEMODEL_API_KEY=sk-fm-你的 API Key
FREEMODEL_BASE_URL=https://api.freemodel.dev/v1

在 .gitignore 中添加：
```
.env
```
在 Cline 设置中引用环境变量（如插件支持）

七、首次使用测试

7.1 测试连接状态

打开 Cline 面板（点击右侧机器人图标）

在对话框中输入：

你好，请简单介绍一下你自己

按 Enter 发送

✅ 成功的表现：

显示 ‘Thinking…’ 或 '生成中…
几秒后收到回复
回复内容正常

❌ 失败的表现：

提示 “Connection failed”
提示 “401 Unauthorized”
提示 “429 Too Many Requests”
长时间无响应

7.2 测试代码能力

在对话框中输入：

请帮我写一个 Python 函数，计算斐波那契数列的第 n 项，要求：
1. 使用递归方法
2. 添加类型注解
3. 添加文档字符串

预期输出：

def fibonacci(n: int) -> int:
    """
    计算斐波那契数列的第 n 项。
    
    Args:
        n: 要计算的项数（从 0 开始）
    
    Returns:
        第 n 项的斐波那契数
    
    Examples:
        >>> fibonacci(0)
        0
        >>> fibonacci(1)
        1
        >>> fibonacci(10)
        55
    """
    if n < 0:
        raise ValueError("n 必须是非负整数")
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

7.3 测试文件操作

在 VSCode 中打开一个已有的代码文件

在 Cline 对话框中输入：

@当前文件名.py 请帮我分析这个文件的代码结构

Cline 会读取文件并给出分析

八、实际使用

使用示例分类图

Claude Code 插件支持多种使用场景，下图展示了主要功能分类：

示例

8.1 示例 1：生成代码

需求: 创建一个用户登录功能

输入:

请用 Python + Flask 创建一个用户登录 API，要求：
1. 接收 username 和 password 参数
2. 验证用户信息（模拟验证即可）
3. 返回 JWT token
4. 添加错误处理

预期输出: 完整的 Flask 路由代码

8.2 示例 2：代码审查

操作:

打开一个已有的 Python 文件

在 Cline 中输入：

@app.py 请审查这段代码，指出潜在的问题和改进建议

预期输出: 代码问题列表 + 改进建议

8.3 示例 3：重构代码

操作:

选中一段代码
右键选择 Cline: Refactor

或直接在对话框输入：

请重构这段代码，使其更符合 Python 最佳实践

8.4 示例 4：生成单元测试

操作:

打开一个函数文件

输入：

@utils.py 请为这个文件中的所有函数生成 pytest 单元测试

8.5 示例 5：解释代码

操作:

选中不理解的代码

输入：

请用中文解释这段代码的工作原理

8.6 示例 6：调试帮助

操作:

复制错误信息

输入：

我遇到这个错误，请帮我分析原因并提供解决方案：

Traceback (most recent call last):
  File "app.py", line 42, in <module>
    result = calculate(data)
TypeError: 'NoneType' object is not subscriptable

九、高级功能配置

9.1 自定义系统提示词

在设置中添加系统提示词，让 Cline 的行为更符合你的需求：

你是一个专业的 Python 开发工程师，专注于 Web 后端开发。
请用中文回答，代码注释也使用中文。
在给出代码之前，先分析问题并提供多种解决方案的对比。

9.2 配置模型参数

不同场景使用不同参数：

日常编码（推荐）:

{
  "temperature": 0.7,
  "maxTokens": 4096,
  "topP": 0.9
}

代码审查（更严谨）:

{
  "temperature": 0.3,
  "maxTokens": 2048,
  "topP": 0.8
}

创意生成（更随机）:

{
  "temperature": 0.9,
  "maxTokens": 8192,
  "topP": 0.95
}

9.3 使用快捷命令

Cline 支持以下快捷命令：

命令	功能
`/help`	显示帮助信息
`/clear`	清除对话历史
`/new`	开始新对话
`/settings`	打开设置
`@file`	引用文件
`@folder`	引用文件夹
`#issue`	创建 GitHub Issue

9.4 配置快捷键

在 VSCode 的快捷键设置中（Ctrl+K Ctrl+S）：

[
  {
    "key": "ctrl+shift+l",
    "command": "cline.focus",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+k",
    "command": "cline.clear",
    "when": "clinePanelVisible"
  }
]

9.5 多配置文件管理

为不同项目配置不同的 API：

创建工作区配置文件 .vscode/settings.json
不同工作区使用不同的 API Key
适用于团队多账户场景

十、故障排查

故障排查决策流程图

遇到问题时，可参考以下流程图快速定位解决方案：

大全

10.1 错误 401 Unauthorized

现象: 提示 “Invalid API Key” 或 “401 Unauthorized”

原因:

API Key 已过期
API Key 权限不足

解决方案:

检查 API Key 是否正确复制（无多余空格）
在 freemodel.dev dashboard 确认密钥状态
重新创建一个新的 API Key
确认密钥有 Read 和 Write 权限

10.2 错误 429 Too Many Requests

现象: 提示 “Rate limit exceeded”

原因:

API 调用频率超限
账户配额用完

解决方案:

等待几分钟后重试
在 dashboard 查看配额使用情况
升级账户套餐
购买更多额度

10.3 错误 404 Not Found

现象: 提示 “Model not found”

原因:

模型名称填写错误
该模型在 FreeModel 不可用

解决方案:

检查模型名称拼写
在 dashboard 查看可用模型列表
更换其他可用模型

10.4 连接超时

现象: 长时间 “Thinking…” 后提示 “Timeout”

原因:

网络连接问题
服务器响应慢
需要代理

解决方案:

检查网络连接
增加 timeout 设置（如 120 秒）

配置代理：

{
  "http.proxy": "http://127.0.0.1:7890",
  "https.proxy": "http://127.0.0.1:7890"
}

联系 FreeModel 技术支持

10.5 插件无响应

现象: 点击 Cline 图标无反应

原因:

插件未正确安装
VSCode 版本过低
插件冲突

解决方案:

重启 VSCode
卸载并重新安装插件
更新 VSCode 到最新版
禁用其他可能冲突的 AI 插件

10.6 中文乱现象: 回复中出现 � 或乱码

原因:

编码设置问题
字体不支持

解决方案:

在 VSCode 设置中确认编码为 UTF-8
安装中文字体
在 settings.json 中添加：
```
{
  "files.encoding": "utf8"
}
```

10.7 模型回复质量差

现象: 回复不准确或答非所问

原因:

提示词不清晰
模型参数不合适
上下文太长

解决方案:

优化你的提问方式，更具体明确
调整 temperature 参数（降低更严谨）
开始新对话，清除过长上下文
更换更强大的模型

十一、最佳实践建议

11.1 安全最佳实践

**保护 API Key - 永远不要提交到 Git 仓库
- 使用 .env 文件存储
- 定期更换密钥
- 在 dashboard 监控使用情况
权限最小化
- 只给必要的权限
- 不要使用 Admin 权限的密钥
- 为不同用途创建不同密钥

11.2 使用效率建议

提问技巧
- 问题要具体明确
- 提供足够的上下文
- 使用 @file 引用相关文件
- 将复杂任务分解为多个步骤提问
上下文管理
- 定期使用 /clear 清除历史
- 长对话后开始新会话
- 重要信息重复提及
模型选择
- 日常编码：claude-sonnet-4
- 复杂任务：claude-opus
- 快速问答：轻量级模型

11.3 成本优化

监控用量
- 定期查看 dashboard 用量
- 设置用量提醒
- 避免不必要的冗长对话
优化提示词
- 简洁明确的提问节省 token
- 避免重复提问
- 使用代码块包裹代码

11.4 团队协作

统一配置
- 团队使用相同的系统提示词
- 共享最佳实践文档
- 建立内部使用规范
知识沉淀
- 保存优质对话记录
- 建立常见问题 FAQ
- 定期分享使用技巧

附录 A：常用模型对比

模型	速度	质量	价格	适用场景
claude-sonnet-4	⭐⭐⭐⭐	⭐⭐⭐⭐	中等	日常编码
claude-opus	⭐⭐⭐	⭐⭐⭐⭐⭐	高	复杂任务
gpt-4o	⭐⭐⭐⭐	⭐⭐⭐⭐	中等	通用任务
gemini-pro	⭐⭐⭐⭐	⭐⭐⭐	低	快速问答

附录 B：快捷命令速查表

/help          - 帮助
/clear         - 清除对话
/new           - 新对话
/settings      - 设置
@filename      - 引用文件
/folder        - 引用文件夹
#issue         - 创建 Issue
/explain       - 解释代码
/refactor      - 重构代码
/test          - 生成测试

附录 C：资源链接

FreeModel.dev 官网: https://freemodel.dev
FreeModel Dashboard: https://freemodel.dev/dashboard
VSCode 下载: https://code.visualstudio.com/
Cline 插件: https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev
Cline 文档: https://github.com/cline/cline
OpenAI API 文档: https://platform.openai.com/docs/api-reference

附录 D：常见问题 FAQ

Q: FreeModel.dev 是免费的吗？
A: FreeModel.dev 提供免费额度和付费套餐，具体价格请查看官网。

**Q: 可以在公司电脑上使用吗？A: 可以，但请遵守公司信息安全政策。但请遵守公司的安全政策，不要将 API Key 提交到公司代码仓库。

Q: 支持哪些编程语言？
A: 支持所有主流编程语言，包括 Python、JavaScript、Java、C++、Go 等。

Q: 可以离线使用吗？
A: 不可以，需要网络连接访问 FreeModel.dev API。

Q: 如何反馈问题？
A: 可以通过 FreeModel.dev 官网的客服渠道反馈，或在 Cline 插件的 GitHub 提 Issue。

教程版本: v2.0
最后更新: 2026-06-12
作者: 笙-
许可: CC BY 4.0

💡 提示: 如本教程有帮助，欢迎分享给更多人。如有问题或建议，欢迎反馈。

DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

25.TCO 成本测算：训练与推理的完整成本模型

DeepSeek技术社区

AI 数字人直播对电脑配置有要求吗？

DeepSeek技术社区

2026深度实测：主流AI编程工具全方位横评，全流程开发对比

本次我将以全流程多维横评的视角，实测 TRAE、Tabnine、Google Gemini Code Assist、CodeBuddy、Amazon Q Developer 五款工具，围绕项目初始化、代码生成、调试排错、多文件重构、部署适配五大核心环节，结合我真实线上踩坑事故、完整可运行的NestJS代码实战，客观拆解各工具的优劣差异，给不同场景的开发者提供可落地的选型参考。但个人开发性价比极低，