本博客由AI模型商OhMyGPT强力驱动！如何更快地访问本站？有需要可加电报群获得更多帮助。本博客用什么VPS？创作不易，请支持苯苯！推荐购买本博客的VIP喔，10元/年即可畅享所有VIP专属内容！

概览

系统介绍 Vibe Coding 开发环境的完整配置流程，涵盖 NPM、VSCode、Claude Code 和 OpenAI Codex 四大核心工具
深入解析 NPM 为何成为终端 Vibe Coding 工具的首选包管理平台，包括其跨平台一致性、依赖管理能力和生态系统优势
详细说明 VSCode 作为 Vibe Coding IDE 的独特价值，包括丰富的插件生态、快速更新的 AI 编程插件、现代化界面和源代码管理器
提供通过 NPM 安装 Claude Code 和 Codex CLI 的完整步骤，以及在 VSCode 中安装相应插件的详细指南

前言

在之前的文章 Vibe Coding CLI评测： Claude Code vs. OpenAI Codex vs. Gemini CLI 里，我已经给小伙伴们详细对比过市面上主流的三种终端 Vibe Coding 工具——Claude Code、OpenAI Codex CLI 和 Gemini CLI。从那篇文章的评测结果来看，Claude Code 在 SWE-bench 得分（72.7%）、响应速度和 Agent Skills 开发体验方面都表现最佳，而 Codex CLI 则凭借开源可定制性和接近 Claude 的性能（69.1%）成为不少开发者的选择。考虑到这两个工具在实际使用中的互补性，我当时就提到会同时使用它们来应对不同的编程场景。

不过话说回来，光有命令行工具还不够，一个顺手的 IDE 能让 Vibe Coding 的体验提升好几个档次。之前在 VSCode作为终端工具替代FinalShell和MobaXterm 和在Windows里通过VSCode使用Claude Code和Codex 这两篇文章里，我也分别介绍过 VSCode 的一些应用场景。但这次我想给小伙伴们来一个更系统的配置指南，把 NPM + VSCode + Claude Code + Codex 这一套完整的 Vibe Coding 开发环境从头到尾梳理一遍，让大家能够快速上手，少走弯路 (～￣▽￣)～

NPM：Vibe Coding 时代的包管理基石

在开始安装具体的 Vibe Coding 工具之前，我想先和小伙伴们聊一聊 NPM（Node Package Manager，Node.js 包管理器） 这个平台。可能在 Node.js 生态圈里混的小伙伴对 NPM 都不陌生，但你有没有想过，为什么绝大多数终端 Vibe Coding 工具都选择 NPM 作为它们的包管理平台？这背后其实有几个很关键的原因，而这些原因在 Vibe Coding 时代变得更加重要了。

什么是 NPM

NPM（Node Package Manager）是 Node.js 的默认包管理器，也是目前世界上最大的软件注册表。它最初是作为 Node.js 的附属工具诞生的，主要用来管理 JavaScript 项目的依赖关系。但随着时间的发展，NPM 已经演变成为一个通用的开发工具分发平台，承载了远超 JavaScript 生态的各种工具链。

不过咱们今天不聊 NPM 的历史沿革，重点是想理解它为什么能在 Vibe Coding 时代扮演如此重要的角色。简单来说，NPM 的核心价值体现在几个方面：跨平台一致性、依赖管理能力、开发者友好性和生态系统成熟度。这些特性恰好满足了终端 Vibe Coding 工具的几个核心需求。

跨平台一致性

Vibe Coding 工具的一个显著特点就是需要在不同的操作系统上运行——Windows、macOS、Linux，每个平台的用户群体都不小。传统的包管理方式往往是平台特定的，比如 macOS 有 Homebrew，Ubuntu 有 apt，Windows 有 Chocolatey，这种方式虽然也能用，但对于工具开发者来说就意味着要维护多个安装包和发布渠道，开发成本和复杂度都会大幅上升。

NPM 的优势在于它提供了一套统一的包管理接口，无论你使用的是什么操作系统，只要安装了 Node.js 和 NPM，就可以用相同的命令来安装和管理包。比如安装 Codex CLI，无论在哪个平台上都是一行 npm install -g @openai/codex 搞定。这种跨平台一致性对于 Vibe Coding 工具的开发者来说意味着更低的维护成本，对于用户来说则意味着更简单的安装过程和更一致的使用体验。

更重要的是，NPM 的跨平台能力不仅体现在安装命令上，还体现在包的兼容性处理上。当你发布一个 NPM 包时，你可以为不同的平台提供不同的二进制文件，NPM 会自动根据当前平台选择正确的版本。这对于像 Claude Code 和 Codex 这样包含原生二进制组件的工具来说尤为重要，它们通常需要为不同平台编译特定的二进制文件，NPM 的这种机制能够确保用户总是获得适合自己系统的版本。

依赖管理能力

Vibe Coding 工具往往不是孤立运行的，它们需要依赖各种底层库和工具来完成任务。比如 Codex CLI 可能需要依赖特定的网络库来与 OpenAI API 通信，Claude Code 可能需要依赖文件系统操作库来读取和编辑代码。这些依赖关系如果让用户手动管理，很容易出现版本冲突、缺失依赖等问题。

NPM 的依赖管理机制在这方面做得相当出色。当你安装一个 NPM 包时，NPM 会自动解析并安装该包所需的所有依赖项，并且会处理不同包之间的版本兼容性。这意味着用户不需要关心这个工具到底依赖了什么库，也不需要担心版本冲突的问题——NPM 会把这些都处理好。

另一个值得提及的特性是 NPM 的依赖树结构。每个 NPM 包都有自己的依赖树，这些依赖树是相互独立的，不会因为不同包依赖了不同版本的同一个库而产生冲突。这种设计对于 Vibe Coding 工具来说特别重要，因为你可能会同时使用多个 AI 编程助手，它们可能依赖了不同版本的底层库，NPM 的机制能够确保它们和谐共存，互不干扰。

开发者友好性

从工具开发者的角度来看，NPM 提供了一套非常友好的发布和更新机制。发布一个 NPM 包只需要几个命令，更新也很简单。这种低门槛的发布机制使得开发者可以快速迭代工具，及时修复 bug 和添加新功能。对于 Vibe Coding 这种快速发展的领域来说，这种快速迭代的能力尤为重要——AI 技术在快速进步，用户需求也在不断变化，一个能够快速响应变化的工具分发平台是非常关键的。

NPM 还提供了版本管理和语义化版本控制的支持。开发者可以按照语义化版本规则（major.minor.patch）来管理工具的版本号，用户可以选择安装特定版本的包，或者使用 @latest、@next 等标签来获取最新版本。这种灵活性对于 Vibe Coding 工具来说很有价值，因为有些用户可能希望使用最前沿的功能，而有些用户则更看重稳定性，NPM 的版本管理机制能够满足不同用户的需求。

生态系统成熟度

NPM 经过多年的发展，已经形成了一个非常成熟的生态系统。这不仅仅体现在包的数量上（目前已经超过 200 万个包），更体现在生态系统的各种支持工具和服务上。比如有专门的安全审计工具、私有包托管服务、包质量分析工具等等。这些周边工具和服务能够帮助开发者更好地维护和发布他们的工具。

对于 Vibe Coding 工具来说，NPM 生态系统的成熟度意味着开发者可以专注于工具本身的功能，而不需要为分发、版本管理、安全审计这些基础设施问题花费太多精力。用户也能从中受益，因为他们可以信任 NPM 上的包经过了基本的安全检查，有清晰的版本历史和文档链接。

小结

总的来说，NPM 之所以成为终端 Vibe Coding 工具的首选包管理平台，是因为它在跨平台一致性、依赖管理能力、开发者友好性和生态系统成熟度这几个方面都提供了优秀的解决方案。在 Vibe Coding 时代，我们需要的是能够快速分发、易于安装、可靠更新的工具管理方式，NPM 恰好满足了这些需求。这也解释了为什么无论是 Claude Code 还是 Codex CLI，都选择或支持通过 NPM 进行分发和安装。

安装 NPM

理解了 NPM 的价值之后，接下来就是实际的安装操作了。NPM 通常会随 Node.js 一起安装，所以我们需要先安装 Node.js。这里分别给 macOS 和 Windows 用户介绍一下安装流程 (～￣▽￣)～

在 macOS 上安装 NPM

macOS 用户有几种安装 Node.js 和 NPM 的方式，我推荐使用官方安装包或者 Homebrew，这两种方式都比较稳定可靠。

方式一：官方安装包（推荐新手）

这是最简单直接的方式，适合不太熟悉命令行操作的小伙伴。

下载安装包：访问 Node.js 官网，你会看到两个主要版本——LTS（长期支持版）和 Current（最新版）。对于大多数用户来说，我强烈推荐选择 LTS 版本，因为它更稳定，兼容性也更好。
运行安装程序：下载完成后，双击 .pkg 文件，会弹出一个安装向导。基本上就是一路”继续”就可以了，安装过程中会提示你输入管理员密码。
验证安装：安装完成后，打开终端（Terminal），运行以下命令来验证安装是否成功：

node --version
npm --version

正常情况下，你会看到类似以下的输出：

v20.11.0
10.2.4

是不是感觉很简单？哈哈哈，这种方式确实挺省心的。

方式二：使用 Homebrew（推荐进阶用户）

我自己用的就是这个方法。如果你已经安装了 Homebrew（macOS 上最流行的包管理器），那么用命令行安装 Node.js 会更方便，而且以后更新也很容易。

安装 Node.js：在终端中运行以下命令：

brew install node

验证安装：同样运行 node --version 和 npm --version 来确认安装成功。

Homebrew 的优势在于更新管理非常方便。当需要更新 Node.js 时，只需要运行：

brew upgrade node

方式三：使用 nvm（开发者推荐）

对于需要在不同项目间切换 Node.js 版本的开发者，我强烈推荐使用 nvm（Node Version Manager）。它允许你在同一台机器上安装和管理多个 Node.js 版本。

安装 nvm：在终端中运行以下命令：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

重新加载终端配置：关闭并重新打开终端，或者运行：

source ~/.bash_profile
# 如果你使用的是 zsh，则运行：
source ~/.zshrc

安装 Node.js：使用 nvm 安装最新的 LTS 版本：

nvm install --lts

设置默认版本：

nvm alias default lts/*

nvm 的好处是你可以在不同项目间轻松切换 Node.js 版本，只需要 nvm use xx.xx.x 就可以了。

在 Windows 上安装 NPM

Windows 用户的安装流程相对简单一些，主要使用官方提供的安装程序。

使用官方安装程序

下载安装包：同样访问 Node.js 官网，下载 Windows 版本的安装程序（.msi 文件）。记得选择 LTS 版本哦。
运行安装程序：双击下载的 .msi 文件，会启动安装向导。安装过程中有几个地方需要注意：
安装路径：默认路径是 C:\Program Files\nodejs，如果你的系统盘空间紧张，可以选择其他盘符，但路径中最好不要包含中文字符。
自动安装必要工具：安装程序会询问是否自动安装必要的编译工具（如 Python 和 Visual Studio Build Tools），如果你打算安装一些需要编译的原生模块，建议勾选这个选项。
验证安装：打开 PowerShell 或命令提示符（CMD），运行：

node --version
npm --version

如果看到了版本号输出，恭喜你，安装成功了！

使用 Chocolatey（进阶用户）

如果你是 Windows 的进阶用户，并且已经安装了 Chocolatey（Windows 上的包管理器），那用命令行安装会更方便。

以管理员身份打开 PowerShell：右键点击 PowerShell，选择”以管理员身份运行”。
安装 Node.js：

choco install nodejs-lts

验证安装：同样运行 node --version 和 npm --version。

Chocolatey 的优势在于和 macOS 上的 Homebrew 类似，更新管理很方便：

choco upgrade nodejs-lts

常见安装问题排查

在安装过程中，你可能会遇到一些问题。这里列出几个常见的坑，希望能帮小伙伴们少走弯路 (～￣▽￣)～

权限问题（macOS/Linux）

如果你在运行 npm install -g 时遇到 EACCES 错误，这通常是因为 NPM 的全局安装目录没有写入权限。有几种解决方案：

方案一：使用 nvm
这是最推荐的方案，前面已经介绍过了。nvm 会将 Node.js 安装在你的用户目录下，不会遇到权限问题。

方案二：修改 NPM 的默认目录

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

然后将以下内容添加到你的 ~/.bash_profile 或 ~/.zshrc 文件中：

export PATH=~/.npm-global/bin:$PATH

保存后重新加载配置文件即可。

环境变量问题（Windows）

如果你安装完成后，在命令行中运行 node 或 npm 提示”命令不存在”，这通常是因为 Node.js 的安装路径没有添加到系统的 PATH 环境变量中。

解决方法：
1. 右键点击”此电脑”，选择”属性”
2. 点击”高级系统设置”
3. 点击”环境变量”
4. 在”系统变量”中找到 Path，点击”编辑”
5. 点击”新建”，添加 Node.js 的安装路径（默认是 C:\Program Files\nodejs）
6. 确定并关闭所有窗口，重新打开命令行工具

网络速度问题

国内的小伙伴在安装 NPM 包时可能会遇到速度较慢的问题。这是因为 NPM 的默认注册表托管在国外。可以考虑使用国内的 NPM 镜像源：

查看当前镜像：
在配置镜像之前，你可以先查看当前使用的镜像源：

npm config get registry

默认情况下，你会看到 https://registry.npmjs.org/（官方源）。

使用淘宝镜像：

npm config set registry https://registry.npmmirror.com

配置完成后，可以再次运行 npm config get registry 来验证是否切换成功。正常情况下，你会看到输出变为 https://registry.npmmirror.com/。

如果需要恢复官方源：

npm config set registry https://registry.npmjs.org

验证安装

无论你使用哪种方式安装，最后都应该验证一下安装是否成功。在终端或命令行中运行：

node --version
npm --version

你还应该检查一下 NPM 的全局安装路径，这对后面安装 Claude Code 和 Codex 很重要：

npm config get prefix

在 macOS 上，输出可能类似 /usr/local 或你自定义的路径；在 Windows 上，通常会是 C:\Users\你的用户名\AppData\Roaming\npm。

记下这个路径，后面如果遇到命令找不到的问题，可能需要手动将这个路径下的 bin 目录添加到 PATH 环境变量中。

现在你的系统上应该已经成功安装了 Node.js 和 NPM，可以继续下一步操作了！

通过 NPM 安装 Claude Code 和 Codex CLI

理解了 NPM 的价值之后，接下来就是实际的Vibe Coding软件安装操作了。

为什么是 Claude Code和OpenAI Codex CLI？

在前面的评测文章里我已经提到过，目前终端 Vibe Coding 领域主要有三个玩家：Claude Code、OpenAI Codex CLI 和 Gemini CLI。那为什么偏偏是 Claude Code 和 Codex CLI 呢？这背后其实有几个很实际的原因 (～￣▽￣)～

先说说 Codex CLI。这个工具最大的优势之一就是价格便宜，对于预算有限的开发者来说特别友好。更重要的是，它支持的 GPT-5.2 High 模型性能非常强大，指令遵循能力出色——只要你愿意花点时间等待，它的出品质量真的很靠谱。我自己在日常使用中最常用的组合就是 Codex + GPT-5.2 High，这个配置在大多数编程场景下都能给出令人满意的结果。最近几天 OpenAI 还推出了 GPT-5.3-Codex，模型能力进一步加强，而且特别适合办公用途，这让 Codex CLI 的价值又提升了一个档次。

Claude Code 的优势则体现在不同的维度。首先是它支持的模型类型非常丰富，甚至可以用国产模型——这对于不想依赖海外服务的开发者来说是个巨大的优势。Claude Codes配合国产模型在一些轻量级、速度敏感型的任务上表现相当不错。还有一个很实用的点是：虽然 Codex 已经很强大了，但偶尔还是会遇到一些它处理得不太好的任务（这种情况不多见，但确实存在），这时候就可以用 Claude 的 Opus 4.5 来兜底——就像有个经验丰富的”老大哥”随时准备接手难题一样。最近 Claude 也推出了 Opus 4.6，模型能力进一步增强，办公场景下的表现也很出色。

至于 Gemini CLI，老实说目前的 Agentic 能力比较差，在处理复杂的多步骤任务时往往力不从心。所以暂时不太推荐作为主力工具使用，当然 Google 也在持续改进，未来也许会有惊喜 (～￣▽￣)～

所以总结一下：选择 Claude Code + Codex CLI 的组合，是因为它们在性价比、模型多样性、任务互补性这几个维度上达到了一个很好的平衡点。这不是说其他工具不好——Gemini CLI 也有它的优势，而且 Google 的模型能力也在快速进步——但对于大多数开发者来说，目前的这套组合确实能够覆盖最广泛的开发和办公场景，同时保持良好的使用体验和可控的成本。

当然，这里也得多嘴提醒一句：虽然 Claude Code 支持国产模型，但市面上很多所谓的”国产 Vibe Coding 工具”其实都是跟风之作，功能抄袭、体验不佳，甚至还有安全隐患——个人不太推荐大家使用这些工具 (￣▽￣) 这倒不是说国产技术不行，而是这个领域真正用心打磨的产品太少了，大部分都是蹭热度的快活，与其花时间在这些不成熟的产品上，不如踏踏实实用好 Claude Code 和 Codex CLI 这两个经过验证的工具。

安装 Claude Code

基于 NPM ，Claude Code的安装过程相当简洁。在终端中运行以下命令即可：

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

更新软件时也可以用这个命令；输出应该类似：

changed 3 packages in 3s

2 packages are looking for funding
  run `npm fund` for details

这条命令会从 NPM 注册表下载 Claude Code 的最新版本，并将其安装为全局包。安装完成后，你可以通过运行 claude --version 来验证安装是否成功。正常情况下，你会看到类似以下的输出：

2.1.33 (Claude Code)

安装完成后，建议先完成CC-Switch的设置（见后面）再打开。推荐使用第三方API登录，这样可以获得更优的使用体验和更高的调用额度，发票报销也比较方便。

安装 Codex CLI

Codex CLI 的安装方式与 Claude Code 类似，也是通过 NPM 进行全局安装。在终端中运行以下命令：

npm install -g @openai/codex

安装完成后，可以通过 codex --version 来验证安装是否成功。正常情况下，你会看到类似以下的输出：

codex-cli 0.98.0

版本管理和更新

NPM 的一个优势是版本管理和更新非常方便。你可以通过 npm list -g @anthropic-ai/claude-code 和 npm list -g @openai/codex 来查看当前安装的版本号。当需要更新到最新版本时，只需运行：

npm update -g @anthropic-ai/claude-code
npm update -g @openai/codex

NPM 会自动检查并安装最新版本的包。如果你需要安装特定版本的包（比如为了稳定性考虑），可以在包名后加上版本号，比如 npm install -g @anthropic-ai/[email protected]。

常见问题排查

在使用 NPM 安装这些工具的过程中，可能会遇到一些常见问题。最常见的是权限问题——在某些系统上，全局安装 NPM 包可能需要管理员权限。如果你遇到 EACCES 错误，可以考虑使用 sudo（在 Linux 和 macOS 上）或者以管理员身份运行终端（在 Windows 上）。不过更推荐的解决方案是使用 nvm（Node Version Manager）来管理 Node.js 和 NPM，这样可以避免权限问题，同时还能方便地切换不同版本的 Node.js。

另一个常见问题是网络速度。NPM 的默认注册表托管在国外，在某些网络环境下下载速度可能较慢。这种情况下，可以考虑使用国内的 NPM 镜像源，比如淘宝镜像。通过运行 npm config set registry https://registry.npmmirror.com 来切换到淘宝镜像，通常能够显著提升下载速度。

CC Switch：不可或缺的强大Vibe Coding辅助工具

在前面的小节里，我给小伙伴们详细介绍了 Claude Code 和 Codex CLI 各自的优势，以及为什么要同时使用这两个工具。但问题来了——实际使用中，如果你需要在不同的 API 提供商之间切换，或者在 Claude Code、Codex、Gemini CLI 之间切换配置，每次都要手动修改配置文件，是不是有点麻烦？而且如果你用了多个第三方 API 服务（比如拼车服务），切换起来就更繁琐了 (～￣▽￣)～

这时候，CC Switch 就派上用场了！这是一个由开发者 Jason Young（GitHub: farion1231）打造的开源跨平台桌面工具，专门用来管理 Claude Code、Codex、OpenCode 和 Gemini CLI 的配置。它就像一个”万能遥控器”，让你能够在不同的 AI 编程工具和 API 提供商之间一键切换，大大提升了使用效率。

核心功能一览

CC Switch 的功能相当丰富，最新版本已经到了 v3.10.2，而且开发非常活跃。这里给小伙伴们介绍一下它的核心功能：

Provider 管理：这是 CC Switch 最基础也是最实用的功能。你可以在同一个界面里管理多个 API 提供商配置——比如官方账户、第三方 API 服务、或者不同的 API key。想要切换的时候，只需要点击一下”启用”按钮，CC Switch 就会自动修改相应的配置文件（~/.claude/settings.json、~/.codex/auth.json 等），完全不需要手动编辑。系统托盘还支持快速切换，点击一下就能生效，特别方便！
速度测试：不同的 API 提供商响应速度可能差异很大，有些第三方服务虽然便宜，但延迟可能比较高。CC Switch 内置了速度测试功能，可以测量各个 API 端点的延迟，并用直观的质量指标显示出来——这样你就能清楚地知道哪个提供商又快又稳，哪个可能需要避开了 (￣▽￣)
MCP 统一管理：MCP（Model Context Protocol）服务器是 Vibe Coding 工具的重要扩展机制，但手动管理多个应用的 MCP 配置还是挺麻烦的。CC Switch 提供了统一的管理面板，可以在一个界面里管理 Claude Code、Codex、Gemini 三个应用的所有 MCP 服务器。支持 stdio/http/sse 三种传输类型，还有智能 JSON 解析器和 Codex TOML 格式自动校正功能。更棒的是，它支持统一导入/导出和双向同步——配置一次，三个应用都能用！
Skills 管理系统（v3.7.0 新增）：这个功能对 Claude Code 用户特别有用。CC Switch 可以从 GitHub 仓库自动扫描 Claude Skills（包括 Anthropic 官方仓库、ComposioHQ 仓库和社区仓库），支持一键安装/卸载到 ~/.claude/skills/ 目录。你还可以添加自定义仓库，支持子目录扫描。这样就不用自己去 GitHub 上找 Skills 然后手动克隆了，省了不少事 (～￣▽￣)～
Prompts 管理系统（v3.7.0 新增）：如果你经常需要在不同的系统提示词之间切换，这个功能会很实用。CC Switch 支持创建无限数量的系统提示词预设，内置 Markdown 编辑器（语法高亮 + 实时预览），可以在 Claude 的 CLAUDE.md、Codex 的 AGENTS.md、Gemini 的 GEMINI.md 之间快速切换。它还有智能回填保护机制，切换前会自动保存当前内容，防止你手动修改的提示词丢失。
云同步支持：如果你有多台设备（比如工作电脑和私人电脑），CC Switch 的云同步功能会让你受益匪浅。你只需要在设置里选择一个云同步文件夹（Dropbox、OneDrive、iCloud 等都支持），然后在其他设备上也指向同一个文件夹，配置就能自动同步了。这个功能的设计很巧妙——可同步的数据（providers、MCP、Prompts、Skills）存在 SQLite 数据库里，设备级数据（窗口状态、本地路径）存在 JSON 文件里，既保证了同步的便利性，又避免了设备间配置冲突。
i18n 支持：CC Switch 支持中文、英文、日文三种界面语言，而且本地化做得相当彻底——UI、错误提示、系统托盘菜单全都支持。这对于国内用户来说特别友好，不像某些工具只有英文界面，用起来总是有点别扭。

技术架构与安全性

从技术角度来看，CC Switch 的设计相当专业。它采用了 Tauri + Rust 后端，React + TypeScript 前端，整个应用体积小、性能好、资源占用低。最新版本还升级到了 SQLite + JSON 双层存储架构，既保证了数据的一致性和完整性，又为未来的云同步功能打下了基础。

在安全性方面，CC Switch 也做得相当到位。它使用原子写入（临时文件 + 重命名模式）防止配置文件损坏，并发安全的数据库连接避免了竞态条件，还有自动备份功能（保留最近 10 个备份），即使出了问题也能快速恢复。对于配置文件的修改，它还有冲突检测和覆盖警告，防止你不小心把重要的配置覆盖掉了。

安装

更多细节见GitHub 仓库：farion1231/cc-switch

CC Switch 的安装非常简单，支持三大主流操作系统：

macOS 用户（推荐方式）：

brew tap farion1231/ccswitch
brew install --cask cc-switch

更新也很方便：

brew upgrade --cask cc-switch

Windows 用户：从 GitHub Releases 页面下载最新的 CC-Switch-v{version}-Windows.msi 安装包，双击安装即可。也有便携版 CC-Switch-v{version}-Windows-Portable.zip 可选。
Linux 用户：提供了多种安装格式——DEB（Debian/Ubuntu）、RPM（Fedora/RHEL/openSUSE）、AppImage（通用）和 Flatpak。选择适合你系统的版本就行。

基础使用

基本界面

新建API

直接点右上角就可以新建：

进去以后，主要需要填的是供应商名称（起个容易区分的名字）、API KEY和请求地址。如果你用的是cc-switch的合作商家/默认官方API，请示地址不需要填。主模型可以是Opus/Sonnet；推理模型一般是Opus。其它就默认模型类型即可；一般来说，可以从你的API厂家的网站上知道这些模型的标签。

配置JSON是自动生成的；当然，也可以进行一些通用的配置（比如我这里设置了vibenotification作为一个hook，它会在codex/claude code结束工作时通知我）。

模型测试配置、代理配置和计费配置一般不需要特别设置：

切换API

使用的时候，只要直接点击切换不同的API，然后重启VSCode或者新建Claude Code、Codex会话就可以生效：

进阶使用

Agent Skills

cc switch进行agent skills的管理。不过，使用我的skills项目的小伙伴一般用不上，因为我们会使用更加方便的方式进行管理。

在发现技能这里，你可以添加一些github仓库，就可以自动地添加一些skills。我的skills仓库也是支持的： https://github.com/huangwb8/skills

MCP服务器

如图。MCP服务器大家可以先不用设置；以后我会有一个专门的章节介绍。

VSCode：理想的 Vibe Coding IDE

终端工具固然强大，但一个优秀的 IDE 能够让 Vibe Coding 的体验更上一层楼。在众多的代码编辑器和 IDE 中，VSCode 无疑是 Vibe Coding 的最佳选择之一。这不是说其他编辑器不好——Vim、Emacs、JetBrains 系列各有各的优势——但从插件生态、更新速度、现代化程度和社区支持这几个维度来看，VSCode 确实在 Vibe Coding 领域有着独特的优势。

丰富的插件生态

VSCode 最大的优势莫过于其庞大的插件生态系统。VSCode 的插件市场上有数以万计的扩展，涵盖了编程语言支持、主题美化、版本控制、调试工具等各个方面。对于 Vibe Coding 来说，这个丰富的插件生态意味着你可以找到专门的扩展来增强 Claude Code 和 Codex 的功能。

更重要的是，VSCode 的插件更新速度非常快。当 AI 编程领域出现新技术或新工具时，往往很快就能在 VSCode 插件市场上找到相应的支持。比如当 Claude Code 和 Codex CLI 刚推出时，VSCode 的官方和社区插件很快就跟进支持了。这种快速响应的能力在快速发展的 AI 领域尤为重要，它意味着你总是能够使用到最新、最强大的功能。

快速更新的 Vibe Coding 插件

说到插件更新速度，VSCode 在 Vibe Coding 插件方面的表现确实值得称道。以 Claude Code 和 Codex 为例，VSCode 都有官方支持的扩展——Claude Code VSCode Extension 和 OpenAI Codex VSCode Extension。这些官方插件不仅功能完善，而且更新频率很高，能够及时跟进上游工具的更新。

Claude Code 的 VSCode 扩展提供了与命令行工具几乎一致的功能，包括文件编辑、代码解释、Agent Skills 支持等，同时还集成了一些 IDE 特有的功能，比如侧边栏对话历史、内联代码建议等。Codex 的 VSCode 扩展也有类似的特性，支持与 ChatGPT 服务的深度集成，能够提供实时的代码补全和重构建议。

这些插件的另一个优势是它们能够很好地利用 VSCode 的原生功能。比如代码高亮、语法检查、智能提示等，这些功能与 AI 辅助编程的能力结合在一起，能够显著提升开发效率。相比之下，纯终端的 Vibe Coding 工具在视觉反馈和交互体验上就有所欠缺。

现代化的可视化界面

虽然很多资深开发者推崇纯文本界面的简洁和高效，但对于大多数用户来说，一个现代化的图形界面确实能够提升使用体验。VSCode 在这方面做得相当不错——界面简洁美观，布局合理，配色舒适，同时还支持高度的自定义。

你可以根据个人喜好选择不同的主题配色方案，从深色系到浅色系，从极简风格到丰富配色，总有一款适合你。VSCode 还支持自定义布局，你可以调整侧边栏、面板、终端的位置和大小，打造最适合自己的工作空间。对于长时间编程的开发者来说，一个舒适的界面环境能够减少视觉疲劳，提升工作效率。

VSCode 的另一个现代化特性是它的集成终端。你不需要在编辑器和终端之间来回切换，只需要按一个快捷键就能在编辑器内部调出终端。这对于使用 Claude Code 或 Codex 这样的命令行工具来说特别方便——你可以一边查看代码，一边在终端中与 AI 助手交互，整个过程流畅自然。

源代码管理器

VSCode 内置了对 Git 的强大支持，这也是它作为 Vibe Coding IDE 的一个重要优势。在现代软件开发中，版本控制是不可或缺的一环，VSCode 的源代码管理器让 Git 操作变得直观易用。

你可以在 VSCode 中直接查看文件的更改状态、暂存更改、提交更改、推送和拉取代码，所有这些操作都可以通过图形界面完成，不需要记忆复杂的 Git 命令。对于 Git 新手来说，这种可视化的操作方式大大降低了学习门槛。对于经验丰富的开发者来说，VSCode 的 Git 集成也能提升工作效率，减少在命令行和编辑器之间切换的次数。

在 Vibe Coding 场景下，源代码管理器的价值更加凸显。当你使用 Claude Code 或 Codex 进行代码重构或生成新功能时，VSCode 的 Git 集成能够清晰地显示哪些文件被修改了，修改的具体内容是什么。这种可视化的变更展示让你能够更容易地审查 AI 生成的代码，确保它们符合预期，然后再决定是否提交到版本库。

多语言支持和跨平台能力

VSCode 对编程语言的支持非常广泛，几乎涵盖了所有主流和次要的编程语言。无论你使用 JavaScript、Python、Rust、Go 还是其他语言，VSCode 都能提供语法高亮、智能提示、代码格式化等功能。这种多语言支持对于 Vibe Coding 来说特别有价值，因为现代软件项目往往涉及多种语言和框架，一个能够统一处理各种语言的 IDE 能够减少工具切换的成本。

VSCode 的跨平台能力也值得一提。它支持 Windows、macOS 和 Linux 三大主流操作系统，并且在不同平台上的体验高度一致。这意味着你可以在工作电脑上使用 VSCode 进行开发，回家后在个人电脑上继续工作，不需要适应不同的工具和环境。对于团队协作来说，团队成员使用不同的操作系统也能够保持开发环境的一致性，减少沟通成本。

在 VSCode 中安装 Claude Code 和 Codex 插件

理解了 VSCode 的价值之后，接下来就是实际安装插件了。VSCode 的插件安装过程非常简单，主要通过扩展面板来操作。

安装 Claude Code 插件

Claude Code VSCode 插件的核心功能与命令行版本基本一致，包括代码编辑、文件操作、Agent Skills 支持等。同时，插件还提供了一些 IDE 特有的功能，比如在编辑器中直接显示 AI 的建议、侧边栏中的对话历史、以及与 VSCode 原生功能的深度集成。主要是得有一个可视化的界面，让大部分小伙伴不要对终端太排斥 (～￣▽￣)～

首先打开 VSCode，然后按 Ctrl+Shift+X（在 macOS 上是 Cmd+Shift+X）打开扩展面板。在搜索框中输入 “Claude Code”，你应该能够找到官方的 Claude Code 扩展。点击 “Install” 按钮即可开始安装。

安装完成后，你可能需要重新加载 VSCode 窗口来激活插件。插件激活后，我们打开设置：

主要按这样进行设置（没专门说到的，自己把握）：

然后，还要设置比较趁手的快捷键。打开快捷键设置：

搜索一下Claude的快捷键：

我建议修改Claude Code: Open和Claude Code: Open in New Tab这2个；其它的按需使用：

安装 Codex 插件

Codex 的 VSCode 插件安装过程与 Claude Code 类似。在扩展面板中搜索 “OpenAI Codex” 或 “Codex”，找到官方插件后点击 “Install” 即可。

安装完成后，同样需要重新加载窗口来激活插件。和Claude Code一样需要进行一些设置。不过，感觉Codex可以进行的设置并不多：

在VSCode里使用终端

在界面里直接输入 Ctrl + j ，可以在底部调出终端。有时候也许是用得上的：

小结

通过这篇文章的介绍，相信小伙伴们已经对如何配置一套完整的 Vibe Coding 开发环境有了清晰的认识。从理解 NPM 作为包管理平台的价值，到通过 NPM 安装 Claude Code 和 Codex CLI，再到在 VSCode 中配置相应的插件，这套完整的流程涵盖了从基础到进阶的各个方面。

NPM 的跨平台一致性、依赖管理能力和成熟的生态系统，让它成为终端 Vibe Coding 工具的理想分发平台。VSCode 则凭借其丰富的插件生态、快速更新的 AI 编程插件、现代化的界面和强大的源代码管理器，成为 Vibe Coding 的最佳 IDE 选择之一。将这两者结合起来，再加上 Claude Code 和 Codex 这两个强大的 AI 编程助手，你就能够获得一套高效、流畅的 Vibe Coding 开发环境。

在实际使用中，你会发现这些工具的价值远不止于代码生成和补全。它们能够帮助你理解复杂的代码库、重构老旧的代码、编写测试用例、优化算法性能，甚至在某些情况下提供架构设计的建议。随着使用经验的积累，你会逐渐发展出自己独特的工作流和使用习惯，让这些 AI 工具真正成为你的编程伙伴而非简单的工具。

Vibe Coding 时代已经到来，Claude Code 和 Codex 只是这个时代的开始。随着 AI 技术的不断发展，我们还会看到更多更强大的工具出现。但无论技术如何变化，掌握好这些基础工具的使用方法，理解它们的工作原理和最佳实践，都能够帮助你更好地适应未来的变化。希望这篇文章能够帮助你快速上手 Vibe Coding，在 AI 辅助编程的道路上走得更远。如果在配置或使用过程中遇到问题，欢迎在评论区交流讨论~

参考来源:

Anthropic – Claude Code Official Documentation. https://code.claude.com/docs
OpenAI – Codex CLI Documentation. https://developers.openai.com/codex/cli/
NPM – npm Registry Documentation. https://docs.npmjs.com/
VSCode – Visual Studio Code Documentation. https://code.visualstudio.com/docs
Node.js – Node.js Official Website. https://nodejs.org/

---------------
完结，撒花！如果您点一下广告，可以养活苯苯😍😍😍

概览

前言