第03课 Vibe Coding 环境配置

    • 主讲：Bensz Conan
    • 日期：2026-02-12

    课程目标

    本课程将带你从零搭建完整的 Vibe Coding 开发环境，掌握 NPM 包管理、Claude Code 与 Codex CLI 安装配置、CC Switch 多 API 切换管理，以及 VSCode IDE 插件配置。

    • 延伸阅读：AI入门系列：配置 Vibe Coding 工具（VSCode + Claude Code + Codex）
    • 博客：blognas.hwb0307.com
    • GitHub：github.com/huangwb8

    目录

    1. NPM 基础与安装

    2. Claude Code & Codex 安装

    3. CC Switch 配置

    4. VSCode 配置

    5. VSCode里的Claude Code & Codex 插件

    6. 总结

    NPM 基础

    什么是 NPM

    NPM（Node Package Manager） 是 Node.js 的默认包管理器，也是目前世界上最大的软件注册表。

    • 起源：最初作为 Node.js 的附属工具，用于管理 JavaScript 项目依赖
    • 演变：已发展为通用的开发工具分发平台，承载远超 JavaScript 生态的各种工具链
    • 规模：注册表已达数百万包（数量持续增长）

    为什么 Vibe Coding 工具选择 NPM

    Claude Code和Codex CLI都选择或支持通过 NPM 分发，原因在于：

    • 跨平台一致性：一套命令，三大操作系统通用
    • 依赖管理能力：自动处理复杂的依赖关系
    • 开发者友好性：低门槛的发布和更新机制
    • 生态系统成熟度：完善的安全审计和版本管理

    跨平台一致性

    传统包管理方式是平台特定的：macOS 用 Homebrew，Ubuntu 用 apt，Windows 用 Chocolatey。

    NPM 的优势：

    • 无论 Windows、macOS 还是 Linux，安装命令完全相同
    • 例如安装 Codex CLI：npm install -g @openai/codex
    • NPM 会自动根据当前平台选择正确的二进制版本
    • 对工具开发者意味着更低的维护成本，对用户意味着更简单的安装体验

    依赖管理能力

    Vibe Coding 工具需要依赖各种底层库（网络库、文件系统库等），手动管理容易出现版本冲突。

    NPM 的解决方案：

    • 自动解析并安装所有依赖项
    • 处理不同包之间的版本兼容性
    • 每个包有独立的依赖树，互不干扰
    • 用户无需关心底层依赖细节

    开发者友好性

    快速迭代：发布和更新 NPM 包只需几个命令，开发者可以快速响应 bug 修复和新功能需求。

    版本管理：

    • 支持语义化版本控制（major.minor.patch）
    • 用户可选择安装特定版本或最新版本
    • 满足追求前沿功能和追求稳定性的不同需求

    生态系统成熟度

    NPM 经过多年发展，形成了成熟的生态系统：

    • 安全审计工具：自动检测包的安全漏洞
    • 私有包托管：企业级私有包管理服务
    • 质量分析：包的下载量、维护状态等指标
    • 文档链接：清晰的版本历史和使用文档

    开发者可以专注于工具本身，用户可以信任包的基本安全性。

    NPM 安装

    macOS：Homebrew 方式

    前提：已安装 Homebrew。 安装代码：

    brew install node
 

    检测是否安装成功：

    node --version
npm --version
 

    升级node：

    brew upgrade node
 

    Windows：安装

    步骤：

    1. 访问 Node.js 官网，下载 Windows 版 .msi 文件（选择 LTS 版本）

    2. 双击运行安装程序（注意：安装路径避免包含中文字符；建议勾选"自动安装必要的编译工具"）

    3. 打开 PowerShell 或 CMD，验证安装：

    node --version
npm --version
 

    Vibe Coding 工具概览

    四大 AI 编程工具对比

    工具定位主要优势注意点
    Claude Code全能型编程 Agent模型选择多、技能生态成熟成本相对更高
    Codex CLI轻量 CLI + 工作区协作性价比高、开源可定制生态与插件在快速迭代
    OpenCode开源全能型编程工具75+种模型支持、多端可用、可连本地模型开源项目、生态快速迭代
    CursorAI 原生 IDEIDE 深度集成、代码生成准确付费约 $20/月

    为什么选择 Claude Code + Codex CLI

    互补性：两个工具各有所长，组合使用覆盖更广泛的场景

    • Codex CLI：性价比高、指令遵循稳定，适合日常开发与快速迭代
    • Claude Code：模型选择更丰富、技能生态成熟，适合复杂任务与项目级协作

    为什么不选其他工具

    • OpenCode：虽功能全面、支持多端，但生态尚在快速迭代中，稳定性与文档完善度不如成熟方案
    • Cursor：IDE 深度集成体验优秀，但需付费约 $20/月，且需切换到独立 IDE 环境

    Claude Code 的独特优势

    • 模型多样性：支持 Anthropic 官方模型、第三方 API、甚至国产模型
    • 生态丰富：Agent Skills 生态成熟，第三方开发者贡献大量实用技能与扩展
    • Opus模型兜底：遇到高难任务时，可切换更强推理模型接手
    • 响应速度：在同等任务下通常响应更快

    Codex CLI 的独特优势

    • 价格优势：对预算有限的开发者特别友好
    • 指令遵循稳定：对“按规范改代码/跑命令/改配置”的任务表现更稳
    • GPT-5.2 High非常聪明：最新模型推理能力强，适合复杂逻辑分析与技术决策

    Claude Code & Codex 安装

    安装 Claude Code

    • 安装代码
    npm install -g @anthropic-ai/claude-code
 
    • 检验是否成功
    claude --version
 

    安装 Codex CLI

    • 安装代码
    npm install -g @openai/codex
 
    • 检验是否成功
    codex --version
 

    版本管理与更新

    • 更新：
    npm update -g @anthropic-ai/claude-code
npm update -g @openai/codex
 
    • 安装特定的版本（一般不建议）
    npm install -g @anthropic-ai/[email protected]
 

    常见问题排查

    • 权限问题：
      • Linux/macOS：如果正常情况下无法安装可功，可以使用 sudo 或推荐使用 nvm 避免权限问题
      • Windows：以管理员身份运行终端
    • 网络速度问题：
    npm config set registry https://registry.npmmirror.com
 

    CC Switch 配置

    CC Switch 是什么

    CC Switch 是一个开源跨平台桌面工具，专门用于管理 Claude Code、Codex、OpenCode 和 Gemini CLI 的配置。

    • 开发者：Jason Young（GitHub: farion1231）
    • 技术栈：Tauri + Rust 后端，React + TypeScript 前端
    • 核心价值：在不同 AI 编程工具和 API 提供商之间一键切换

    CC Switch 核心功能一览

    功能说明
    Provider 管理管理多个 API 提供商配置，一键切换
    速度测试测量各 API 端点延迟，显示质量指标
    MCP 统一管理统一管理三个应用的 MCP 服务器配置
    Skills 管理从 GitHub 仓库自动扫描并安装 Claude Skills
    Prompts 管理创建和切换系统提示词预设
    云同步支持 Dropbox/OneDrive/iCloud 同步配置

    CC Switch 安装

    • macOS：从 GitHub Releases 下载 .dmg 文件，双击打开，将 CC Switch 拖到 Application 文件夹
    • Windows：从 GitHub Releases 下载 .msi 安装包，双击运行安装程序
    • Linux：提供 DEB、RPM、AppImage、Flatpak 多种格式

    CC Switch 实机演示

    在我Mac Mini M4里展示

    VSCode 配置

    VSCode 作为 Vibe Coding IDE

    在众多编辑器中，VSCode 是 Vibe Coding 的最佳选择之一：

    • 插件生态：数以万计的扩展，AI 编程插件更新快
    • 现代化界面：简洁美观，高度可定制
    • 源代码管理：内置 Git 支持，可视化变更审查
    • 跨平台：Windows/macOS/Linux 体验一致

    VSCode 三大优势

    • 插件生态：AI 工具迭代快，官方与社区扩展跟进及时
    • 界面与工作流：主题/布局可定制，编辑器 + 终端 + AI 对话在同一窗口
    • 源代码管理：内置 Git 视图，便于审查 AI 改动并快速回滚

    安装 Claude Code 插件

    1. 按 Ctrl+Shift+X（macOS: Cmd+Shift+X）打开扩展面板

    2. 搜索 "Claude Code"

    3. 点击 "Install" 安装官方扩展

    4. 重新加载窗口激活插件

    插件功能：代码编辑、文件操作、Agent Skills 支持、侧边栏对话历史、内联代码建议

    Claude Code 插件配置

    设置入口：扩展设置 → Claude Code

    推荐配置：

    • 启用自动保存
    • 配置默认模型
    • 设置工作目录

    快捷键设置：搜索 "Claude"，建议修改 Claude Code: Open 和 Claude Code: Open in New Tab

    安装 Codex 插件

    1. 在扩展面板搜索 "OpenAI Codex" 或 "Codex"

    2. 点击 "Install" 安装官方扩展

    3. 重新加载窗口激活插件

    配置：Codex 插件可配置项较少，基本使用默认设置即可

    VSCode 实机演示

    在我Mac Mini M4里展示

    总结

    完整工具链回顾

    NPM（包管理）
    ↓
Claude Code + Codex CLI（终端工具）
    ↓
CC Switch（配置管理）
    ↓
VSCode + 插件（IDE）
 

    关键要点总结

    • NPM 是 Vibe Coding 工具的分发平台，提供跨平台一致性和依赖管理
    • Claude Code + Codex CLI 组合使用，互为补充，覆盖更广泛场景
    • CC Switch 实现多 API 提供商一键切换，大幅提升使用效率
    • VSCode 凭借插件生态和现代化界面，成为 Vibe Coding 的理想 IDE
    单位 Logo