VS Code 与 IDEA 集成 Claude Code 实战指南——基于智谱 AI 大模型的 AI 辅助编码环境搭建

VS Code 与 IDEA 集成 Claude Code：从环境准备到上手使用的完整教程

- 一、环境准备
- - [1.1 安装 Node.js](#1.1 安装 Node.js)
  - [1.2 安装 NVM（推荐）](#1.2 安装 NVM（推荐）)
  - [1.3 常用 NVM 命令](#1.3 常用 NVM 命令)
- [二、智谱 AI 平台准备](#二、智谱 AI 平台准备)
- - [2.1 API Key 获取](#2.1 API Key 获取)
  - [2.2 查看套餐信息](#2.2 查看套餐信息)
- [三、安装 Claude Code](#三、安装 Claude Code)
- - [3.1 安装 Claude Code CLI](#3.1 安装 Claude Code CLI)
  - [3.2 启动 Claude](#3.2 启动 Claude)
- [四、VS Code 集成](#四、VS Code 集成)
- - [4.1 安装 VS Code](#4.1 安装 VS Code)
  - [4.2 安装 Claude Code 插件](#4.2 安装 Claude Code 插件)
  - [4.3 配置 Claude Code](#4.3 配置 Claude Code)
  - [4.4 代理配置（如需要）](#4.4 代理配置（如需要）)
  - [4.5 启动使用](#4.5 启动使用)
- [五、IDEA 集成](#五、IDEA 集成)
- - [5.1 安装 IDEA 插件](#5.1 安装 IDEA 插件)
  - [5.2 配置 Claude Code](#5.2 配置 Claude Code)
  - - 步骤一：创建配置文件
    - [步骤二：配置 IDEA 插件路径](#步骤二：配置 IDEA 插件路径)
  - [5.3 启动使用](#5.3 启动使用)
  - [5.4 Claude Code with GUI 插件安装和使用](#5.4 Claude Code with GUI 插件安装和使用)
- 六、常见问题

本文介绍如何在 VS Code 和 IDEA 中集成 Claude Code，通过智谱 AI 的 GLM 模型提供 AI 辅助编码能力。

Visual Studio Code 效果展示
IntelliJ IDEA 效果展示

一、环境准备

1.1 安装 Node.js

前往 Node.js 官网下载安装：https://nodejs.org/en/download/

VS Code 插件模式：可以不单独安装 Node.js，VS Code 会自动使用内置版本
IDEA 模式：需要安装 Node.js，要求版本 ≥ Node.js 18

两种安装方式：

方式	说明
Windows Installer (.msi)	直接安装，适合大多数用户
Standalone Binary (.zip)	使用 NVM 管理时下载此版本

注意事项：

要求版本 ≥ Node.js 18

cmd 命令查看版本：node --version

1.2 安装 NVM（推荐）

推荐使用 NVM 管理 Node.js 环境，可根据需要切换 Node.js 版本。

可以查看这篇文章：使用 nvm 安装与管理多版本 Node.js（Windows）

下载 NVM 安装包 nvm-setup.7z
将下载的 Node.js 包放在 NVM 目录下

1.3 常用 NVM 命令

命令	说明
`nvm -v`	查看 nvm 版本
`nvm list available`	查看可安装的 Node.js 版本
`nvm list`	查看已安装的版本
`nvm install <版本号>`	安装指定版本
`nvm use <版本号>`	切换到指定版本
`nvm uninstall <版本号>`	卸载指定版本
`nvm current`	查看当前使用的版本

二、智谱 AI 平台准备

2.1 API Key 获取

登录智谱 AI 开放平台（https://open.bigmodel.cn/），进入 API Key 管理页面，创建或获取 API Key。
API Key 格式为 {API Key ID}.{secret}，请妥善保管。

2.2 查看套餐信息

三、安装 Claude Code

3.1 安装 Claude Code CLI

bash 复制代码

npm i -g @anthropic-ai/claude-code@latest

也可以使用下面的命令：

bash 复制代码

npm install -g @anthropic-ai/claude-code --registry https://registry.npmjs.org/

3.2 启动 Claude

安装完成后执行 claude 命令，出现欢迎界面表示安装成功：

bash 复制代码

查看版本：
claude -v
启动客户端：
claude

说明：IDEA 模式下必须安装 CLI；VS Code 插件模式下可跳过此步。

四、VS Code 集成

4.1 安装 VS Code

官网下载：https://code.visualstudio.com/

要求版本 ≥ 1.98.0（低于此版本通过 Help → Check for Updates 升级）。

4.2 安装 Claude Code 插件

打开 VS Code
进入扩展商店（Ctrl+Shift+X）
搜索 "Claude Code for VS Code"
点击 Install 安装

4.3 配置 Claude Code

打开 VS Code 的 settings.json 文件，添加以下配置：

路径：Users > 当前用户 > AppData > Roaming > Code > User > settings.json
快捷方式：Ctrl+Shift+P → 输入 Preferences: Open User Settings (JSON)

json 复制代码

// === Claude Code 配置 ===

// 代理设置（如能正常访问外网可省略）
"http.proxy": "<你的代理>",

// Claude Code 面板位置
"claudeCode.preferredLocation": "panel",

// Claude Code 环境变量
"claudeCode.environmentVariables": [
    {
        "name": "ANTHROPIC_BASE_URL",
        "value": "https://open.bigmodel.cn/api/anthropic"
    },
    {
        "name": "ANTHROPIC_AUTH_TOKEN",
        "value": "<你的智谱API Key>"
    },
    {
        "name": "ANTHROPIC_DEFAULT_OPUS_MODEL",
        "value": "glm-5-turbo"
    },
    {
        "name": "ANTHROPIC_DEFAULT_SONNET_MODEL",
        "value": "glm-5-turbo"
    },
    {
        "name": "ANTHROPIC_DEFAULT_HAIKU_MODEL",
        "value": "glm-4.5-air"
    }
],

// 禁用登录提示
"claudeCode.disableLoginPrompt": true,

// 默认使用模型
"claudeCode.selectedModel": "glm-5-turbo"

也可以C盘 > Users > 当前用户 > .claude > settings.json的文件，添加以下配置：

json 复制代码

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "<你的智谱API Key>",
    "ANTHROPIC_BASE_URL": "https://open.bigmodel.cn/api/anthropic",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-5-turbo",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-5-turbo",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.5-air",
    "API_TIMEOUT_MS": "3000000",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
  },
  "enabledPlugins": {
    "document-skills@anthropic-agent-skills": true,
    "example-skills@anthropic-agent-skills": true
  },
  "theme": "dark",
  "disableLoginPrompt": true,
  "selectedModel": "glm-5-turbo",
  "preferredLocation": "panel",
  "claud.code.experimental.enableInlineCompletion": true,
  "claud.code.experimental.enableChat": true
}

如果两个地方的文件均进行了配置，优先使用.claude目录下的配置文件。

4.4 代理配置（如需要）

如果 VS Code 无法正常访问外网，需要配置系统代理。

右键 此电脑 → 属性 → 高级系统设置 → 环境变量，在系统变量中添加：

变量名	值
HTTP_PROXY	<你的代理>
HTTPS_PROXY	<你的代理>

注意：如果不在环境变量加HTTPS_PROXY和HTTP_PROXY使用Claude的方法也可以在settings.json里的"env"加上：

json 复制代码

    "HTTP_PROXY": "<你的代理>",
    "HTTPS_PROXY": "<你的代理>"`

4.5 启动使用

安装配置完成后，在 VS Code 中即可通过 Claude Code 面板开始对话：

五、IDEA 集成

5.1 安装 IDEA 插件

要求 IDEA 版本 ≥ 2024.02（推荐 2025.3.3）。

打开 IDEA → File → Settings
左侧选择 Plugins
切换到 Marketplace 标签
搜索 "Claude Code"
找到 Claude Code [Beta] （Publisher: Anthropic PBC），点击 Install
安装完成后重启 IDEA

搜索不到时：检查 IDEA 版本是否满足要求，或检查 IDEA 代理设置。

5.2 配置 Claude Code

步骤一：创建配置文件

找到配置目录，通常为：

复制代码

C:\Users\<当前用户>\.claude

在该目录下新增或修改 settings.json 文件：

json 复制代码

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "<你的智谱API Key>",
    "ANTHROPIC_BASE_URL": "https://open.bigmodel.cn/api/anthropic",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-5-turbo",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-5-turbo",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.5-air",
    "API_TIMEOUT_MS": "3000000",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
  },
  "enabledPlugins": {
    "document-skills@anthropic-agent-skills": true,
    "example-skills@anthropic-agent-skills": true
  },
  "theme": "dark",
  "disableLoginPrompt": true,
  "selectedModel": "glm-5-turbo",
  "preferredLocation": "panel",
  "claud.code.experimental.enableInlineCompletion": true,
  "claud.code.experimental.enableChat": true
}