目录

📢 前言

🛠️ 第一步：安装 Claude Code

1. 执行安装命令

2. 验证安装

🛠️ 第二步：配置中转 API (使用中转 Key)

1. 找到配置目录

🔴 注意：如果找不到 .claude 文件夹怎么办？

2. 创建 settings.json 文件

3. 写入配置代码 (核心)

🔑 第三步：注册 API 平台并获取 API Key (核心)

1. 注册账号

2. 创建 API 令牌 (重点！)

3. 复制 Key

4. 获取模型 ID (Model ID)

🧪 第四步：终端验证

1. 启动 Claude

🚑 紧急插播：遇到 ERR_BAD_REQUEST 报错的终极解决方案

✅ 解决方案（强制跳过新手引导）：

找到配置文件

2. 修改代码 (关键操作)

🚨 关键一步：确认使用自定义 Key (不要选错！)

💻 第五步：VSCode 可视化实战

1. 准备工作区

🧩 第六步：安装神级插件

插件一：Chat for Claude Code (让 AI 住进侧边栏)

插件二：Live Preview (微软官方·嵌入式预览) —— 强烈推荐！

🚀 终极实战：左拥右抱的工作流

🎉 写到最后

📢 前言

在前两期教程中，我们已经成功完成了：

  1. Node.js 环境配置：纯净无残留，D 盘全局路径。

参考教程👉：【2026 最新版】Node.js安装及环境配置超详细教程（以win11为例子）

  1. Git 工具安装：解决了下载慢、配置繁琐的问题。

参考教程👉：【2026 最新版】Git安装及环境配置超详细教程（以win11为例子）

万事俱备，只欠东风！今天我们将安装 Anthropic 最新推出的 Claude Code。它不是一个简单的聊天机器人，而是一个能够直接读写你本地文件、执行终端命令、甚至帮你跑测试的“AI 代理工程师”。

这篇教程将带你完成安装，并教你如何把它“嵌入”到 VSCode 里，实现真正的沉浸式 AI 编程。

🛠️ 第一步：安装 Claude Code

因为我们之前配置好了 Node.js 的 D 盘全局路径和淘宝镜像源，这一步会非常丝滑。

1. 执行安装命令

打开 CMD 或 PowerShell（不需要管理员权限，因为我们之前修复过权限了），输入：

npm install -g @anthropic-ai/claude-code

2. 验证安装

安装完成后，输入以下命令检查：

claude --version

如果出现版本号，说明安装成功！

🛠️ 第二步：配置中转 API (使用中转 Key)

1. 找到配置目录

我们需要在您的用户目录下创建一个 .claude 文件夹。

  • 路径位置：C:\Users\您的用户名\.claude

🔴 注意：如果找不到 .claude 文件夹怎么办？

别慌！这是因为你还没运行过 Claude，或者系统没自动生成。我们需要手动创建一个。

手动右键创建（注意小技巧） 如果你习惯用鼠标：

  1. 打开 C:\Users\您的用户名 目录。

  2. 右键 -> 新建 -> 文件夹。

  3. 关键点：给它命名为 .claude. （注意：前后都有点！）

  4. 原理：Windows 资源管理器有时候不允许直接创建以点开头的文件，但如果你输入 .claude.，按下回车后，系统会自动帮你把后面的点去掉，变成 .claude。

2. 创建 settings.json 文件

在 .claude 文件夹内，右键 -> 新建 -> 文本文档，将文件名（包括后缀）修改为： settings.json

(注意：请确保您的电脑开启了“显示文件扩展名”，不要建成了 settings.json.txt)

3. 写入配置代码 (核心)

右键用 VSCode 或 记事本 打开 settings.json，复制并填入以下内容：

{
    "env": {
        "ANTHROPIC_API_KEY": "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "ANTHROPIC_BASE_URL": "http://linoapi.com",
        "API_TIMEOUT_MS": "3000000",
        "ANTHROPIC_MODEL": "claude-opus-4-5-20251101"
    }
}

⚠️ 必须修改的参数说明：

ANTHROPIC_API_KEY：这里填入您在中转平台申请的 Key（通常以 sk- 开头）。

ANTHROPIC_MODEL:

  • 建议填写目前最强的模型：claude-opus-4-5-20251101。

  • 避坑：不要填不存在的未来版本号，否则会报错。

🔑 第三步：注册 API 平台并获取 API Key (核心)

由于 Claude 官方 API 申请门槛较高且容易封号，我们这里使用国内稳定的中转平台 LinoAPI。它不仅支持支付宝/微信支付，还有专门针对 Claude Code 优化的通道。

1. 注册账号

点击下方链接进入官网注册（新人注册通常会送 0.4元 体验金，足够测试用了）：

进入后点击右上角的 “登录/注册” 即可。如果体验金用完了，可以在“钱包”里适当充值。

2. 创建 API 令牌 (重点！)

登录成功后，首先点击主页中的“控制台”，接着点击左侧菜单栏的 【API 令牌】，然后点击 【+ 添加令牌】。

在弹出的窗口中，请务必注意以下设置：

  • 名称：随便填，比如 Claude Code。

  • 分组：🔴 【非常重要】一定要选择“Claude Code专属”和“自动选择”！

  • 额度：可以设个上限（如 $500）或者默认“无限”。

设置好后，点击底部 【提交】。

3. 复制 Key

提交后，你会看到列表中多了一行。点击 “复制” 按钮，把 sk- 开头的这串密钥复制下来。

  • 👉 动作：回到我们在第二步创建的 settings.json 文件，把这串 Key 填入 ANTHROPIC_API_KEY 的双引号里。

4. 获取模型 ID (Model ID)

Claude Code 需要指定一个具体的模型 ID。 点击左侧菜单的 【模型广场】，在搜索框输入 Claude。

你会看到很多模型，为了保证稳定性，建议选择专门优化的模型。根据官方推荐，我们这里使用： claude-opus-4-5-20251101

  • 👉 动作：复制这个模型 ID，回到 settings.json 文件，填入 ANTHROPIC_MODEL 字段中。

🧪 第四步：终端验证

配置好 API Key 后，千万不要直接去写代码，我们先在终端里跑通“Hello World”，确保链路是通的。

1. 启动 Claude

打开 CMD (命令提示符) 或 PowerShell，输入启动命令：

claude

🚑 紧急插播：遇到 ERR_BAD_REQUEST 报错的终极解决方案

如果在终端输入 claude 后，没有出现 >>，而是出现了一大片红色的报错，提示：

Unable to connect to Anthropic servicesFailed to connect to api.anthropic.com: ERR_BAD_REQUEST

原因分析： 这是因为 Claude Code 在第一次启动时，死活要去连接官方服务器确认“你是否看完了新手教程”。由于网络原因或中转配置未完全覆盖这个握手请求，导致连接失败。

✅ 解决方案（强制跳过新手引导）：

我们需要手动修改 Claude 的“记忆文件”，告诉它：“别连了，我已经学完了！”

找到配置文件

打开你的用户主目录：C:\Users\你的用户名\ (例如 C:\Users\LucasTTboy\)。 在这里找到一个名为 .claude.json 的文件。 (注意：这是一个文件，不是文件夹。如果找不到，请确保勾选了“显示隐藏的项目”)

2. 修改代码 (关键操作)

右键点击该文件，选择 “打开方式” -> “记事本” (或者用 VSCode 打开)。 你可能会看到里面已经有一些内容了，我们需要在最后手动加一行代码。

请严格按照以下格式修改：

  1. 在倒数第二行的末尾，加一个英文逗号 , (JSON 语法要求)。

  2. 在最后一行的大括号 } 之前，换行，填入：

"hasCompletedOnboarding": true

(注意：changelogLastFetched 那一行后面记得补个逗号！)

修改完配置后，我们再次回到 CMD (命令提示符) 或 PowerShell。输入启动命令：

claude

观察变化： 这一次，屏幕上不会再出现那一堆红色的报错，也不会弹窗让你登录。

重新运行 claude 命令后，如果屏幕上出现了黄色的 "Accessing workspace" 字样，恭喜你！这说明你已经成功连上了！

这时候你会看到一个安全提示（Safety Check）：

Quick safety check: Is this a project you created or one you trust? (快速安全检查：这是你创建的项目或者你信任的项目吗？)

操作指引：

  1. 这是因为我们直接在用户目录 (C:\Users\用户名) 下运行的，Claude 需要确认它可以安全地在这个文件夹里读写文件。

  2. 你会看到默认选项指向：> 1. Yes, I trust this folder。

  3. 直接按回车 (Enter) 确认即可。

🚨 关键一步：确认使用自定义 Key (不要选错！)

当你输入 claude 回车后，如果你的配置正确，屏幕上会首先弹出一个 黄色的提示：

Detected a custom API key in your environment (在你的环境中检测到了自定义 API 密钥)

系统会问你：Do you want to use this API key? (你想使用这个密钥吗？)

操作指南：

  1. 按键盘上的 ↑ (上箭头) 键。

  2. 选中 > 1. Yes。

  3. 按回车 (Enter) 确认。

⚠️ 特别注意： 系统默认选的是 2. No (recommended)，这是因为官方希望你用网页登录。但因为我们使用的是 中转 API (LinoAPI)，必须强制使用我们配置好的 Key。所以请务必手动切换到 Yes！

如果没有报错，屏幕会清空，显示橙色的 Welcome back! 和一个可爱的小像素人。这代表你已经成功连上了！

现在，让我们来测试一下它的“真实身份”。在 > 提示符后输入：

你好，你是哪个版本的？

看！它回复了：

“你好！我是 Claude Opus 4.5，模型 ID 是 claude-opus-4-5-20251101...”

恭喜你！你现在用的是 Anthropic 最新的顶级模型 Opus 4.5，而且是在本地终端里直接运行的，无需魔法，无需官方账号，速度飞快！

💻 第五步：VSCode 可视化实战

虽然 CMD 黑窗口很酷，但它没法直接看代码效果。现在我们要把 Claude Code 搬进 VSCode，让它不仅能对话，还能直接操作文件、创建项目、运行代码。

1. 准备工作区

为了测试安全，建议先新建一个文件夹。

  • 在 D 盘或桌面新建一个文件夹，命名为 AI_Playground。

  • 右键 该文件夹 -> 选择 "Open with Code" (用 VSCode 打开)。

🧩 第六步：安装神级插件

光有 Claude Code 还不够，我们要给 VSCode 装上两个“外挂”，让 AI 写完代码后，我们能一键预览效果。

插件一：Chat for Claude Code (让 AI 住进侧边栏)

你之前在终端里运行 claude，需要来回切换窗口。这个插件能直接调用你本地安装好的 Claude Code，让它像微信聊天一样停留在你的编辑器左侧。

  1. 打开插件市场： 点击 VSCode 左侧最底下的**“扩展 (Extensions)”**图标（或者按 Ctrl+Shift+X）。

  2. 搜索并安装： 在搜索框输入：Chat for Claude Code(注意：认准名字，通常是那个下载量较高、图标是 Claude 风格的)。 点击 Install (安装)。

  3. 如何使用： 安装完后，VSCode 左侧栏会出现一个小图标。点击它，你会发现它自动识别了你本地 D 盘安装的 Claude 环境！

    优势：你再也不用手动敲 claude 命令了，直接在侧边栏打字，它就能读取你当前打开的文件。

插件二：Live Preview (微软官方·嵌入式预览) —— 强烈推荐！

这是比 Live Server 更高级的选择！它能直接在 VSCode 里开一个“内置浏览器”，实现代码与效果的同屏对照。

  1. 搜索插件： 在扩展市场搜索：Live Preview

  2. 点击安装： 点击 Install。

🚀 终极实战：左拥右抱的工作流

插件装好了，我们来体验一下什么叫 “沉浸式开发”：

  1. 唤醒 AI (左侧)： 打开 Chat for Claude Code，让它帮你写代码。

请生成一个《图片压缩工具》网站，实现图片压缩处理功能。需要包含完整的前端和后端代码，要求项目可以正常运行。

需要实现的功能：
1. 支持常见图片格式（JPG、PNG、WebP 等）的上传与压缩
2. 可设置压缩质量（如高 / 中 / 低或自定义百分比）
3. 显示原始图片与压缩后图片的对比（尺寸、大小、预览图）
4. 压缩完成后提供下载按钮，支持批量处理

设计要求：
1. 现代简约风格，主色调使用绿色
2. 响应式布局，在手机和桌面设备上均有良好体验
3. 上传区域有明显的拖放提示，操作流程直观清晰

开启预览 (右侧)：

  • 等文件生成后，在左侧文件列表 右键 点击 index.html。

  • 选择 "Show Preview" (显示预览)。

你的 VSCode 会瞬间变成 分屏模式！

  • 左边：是 Claude 生成好的源代码。

  • 右边：是渲染好的网页效果。

🎉 写到最后

恭喜您！经过这一系列的硬核操作，您不仅成功部署了 Claude Code，更打造了一套“免代理、低门槛、可视化”的终极 AI 编程环境。

让我们回顾一下这套环境的核心优势：

  1. 突破限制：通过配置中转 API 与修改 .claude.json，成功绕过官方强制登录与新手引导报错，实现了本地直连 Opus 4.5 满血模型。

  2. 纯净稳健：Node.js 与 Git 均采用 D 盘全局路径 + 国内镜像源 方案，告别 C 盘爆红与网络卡顿。

  3. 沉浸体验：利用 VSCode + Live Preview 插件，实现了“左侧 AI 写代码，右侧实时看效果”的单屏工作流，开发效率呈指数级提升。

现在的您，已经不仅仅是一个程序员，而是一位指挥 AI 军团的“架构师”。 无论是生成赛博朋克特效，还是重构复杂算法，只需一个指令，Claude Code 随时为您待命！

🚀 未来已来，祝您在 AI 结对编程的道路上，创造无限可能！

# ide # vscode # 人工智能 # AI # 编辑器
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

技术速递｜GitHub Copilot SDK 与云原生的完美融合

avatar 2048 AI社区
cover

亲身经历：文科背景的我，如何在2026年拿到AI算法岗offer

avatar 2048 AI社区
cover

2026首发版，自学AI大模型的正确顺序：最新最全学习路线全解析

avatar 2048 AI社区