Claude Code for VS Code 插件使用

Claude Code 在 2.0 的更新后，推出了 VS Code 插件，该插件将 Claude Code 的功能集成到 VS Code 中，提供更 seamless 的体验。相比较于 CLI 的体验，插件版本提供了可视化的 GUI 面板，对于不习惯命令行的用户来说，插件版本会更加友好。

安装插件

在 VS Code 中，点击 扩展 按钮，搜索 Claude Code，然后点击 安装 按钮。

插件配置

右键插件，选择 Settings，进入配置页面。

然后选择 Edit in settings.json

接下来就打开了 settings.json 文件，可以看到添加了一个 claude-code.environmentVariables 配置项，这个就是给 Claude Code 添加环境变量的配置项。

根据之前的文章《Claude Code 配置免费接入智谱AI、魔搭等第三方模型》可知道，我们只需要配置 ANTHROPIC_AUTH_TOKEN 和 ·ANTHROPIC_BASE_URL 两个环境变量，就可以切换接入其他的模型。所以这里，我们就可以添加如下配置（使用的魔搭社区的模型）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
"claude-code.environmentVariables": [
  {
    "name": "ANTHROPIC_BASE_URL",
    "value": "https://api-inference.modelscope.cn"
  },
  {
    "name": "ANTHROPIC_AUTH_TOKEN",
    "value": "your_api_key"
  },
  {
    "name": "ANTHROPIC_MODEL",
    "value": "ZhipuAI/GLM-4.6"
  },
  {
    "name": "ANTHROPIC_SMALL_FAST_MODEL",
    "value": "Qwen/Qwen3-Coder-30B-A3B-Instruct"
  }
]

使用

这里我在使用的时候还会有一个问题，就是默认的模型，虽然上面配置了，但是实际使用时并没有生效，需要额外添加一个配置项，就是上面的 Settings 配置页面中，在 Selected Model 配置项中，填入实际使用的默认模型。

然后就可以开始使用了，输入 Ctrl + Shift + P，输入 Claude Code: Open in New Tab，就可以开始使用啦。或者点击右上角的橙色图标也可以开启一个新的对话。

接下来让它帮我用 html 写一个五子棋游戏，看看效果。可以看到这边会先进行任务规划，而不是一次性完成。

然后开始生成代码，可以看到，代码生成很流畅。

最终生成效果。