VS Code 联动 Claude Code 安装教程

目录

• 1. 前置准备
• 1.1 系统要求
• 1.2 检查环境版本
• 1.3 创建工作目录
• 2. 安装 Claude Code CLI
• 2.1 全局安装
• 2.2 验证安装
• 3. 安装 code-server
• 3.1 下载并安装
• 3.2 配置 code-server
• 3.3 启动服务
• 3.4 访问 Web 界面
• 4. 配置 Claude Code
• 4.1 交互式配置
• 4.2 手动配置（高级）
• 4.3 验证配置
• 5. 安装 Claude Code VS Code 扩展
• 5.1 通过扩展市场安装
• 5.2 配置扩展
• 5.3 打开 Claude Code 面板
• 5.4 测试连接
• 6. 常见问题及解决方案
• ❌ 问题 1：Failed to spawn Claude Code process
• ❌ 问题 2：登录界面卡住
• ❌ 问题 3：终端无法连接 IDE
• ❌ 问题 4：扩展安装后无响应
• ❌ 问题 5：环境变量不生效
• ❌ 问题 6：权限错误 (EACCES)
• 💡 最佳实践
• ✅ 命名规范
• ✅ 配置管理
• ✅ 版本控制
• ✅ 保持更新
• 📚 技术支持

适用系统：Ubuntu 

• 操作系统：Ubuntu 20.04 或更高版本
• Node.js：18.x 或更高版本
• npm：9.x 或更高版本

node --version
npm --version

版本过低？ 使用 nvm 安装最新版本：

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
# 重新加载 shell
source ~/.bashrc
# 安装最新 LTS 版本
nvm install --lts

⚠️ 重要：目录名使用连字符（-），避免空格

mkdir -p ~/claude-code
cd ~/claude-code

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

claude --version

✅ 显示版本号即为安装成功

# 下载最新版本
wget https://github.com/coder/code-server/releases/download/v4.23.1/code-server-4.23.1-amd64.deb

# 安装
sudo dpkg -i code-server-4.23.1-amd64.deb

# 如果缺少依赖
sudo apt-get install -f

# 创建配置目录
mkdir -p ~/.config/code-server

# 生成配置文件
cat > ~/.config/code-server/config.yaml <<EOF
bind-addr: 127.0.0.1:8080
auth: password
password: 你的密码
cert: false
EOF

方式一：手动启动

code-server --config ~/.config/code-server/config.yaml

方式二：系统服务（推荐）

sudo systemctl enable code-server@$USER
sudo systemctl start code-server@$USER

浏览器打开：http://localhost:8080

输入你设置的密码即可使用

claude configure

按提示完成配置：

• 界面语言（建议中文）
• Coding 套餐
• API 密钥
• 编码工具

配置文件位置：~/.claude/settings.json

使用第三方提供商示例：

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.z.ai/api/anthropic",
    "ANTHROPIC_AUTH_TOKEN": "你的认证令牌",
    "API_TIMEOUT_MS": "3000000"
  },
  "enabledPlugins": {
    "你的插件名": true
  },
  "language": "chinese"
}

claude

💡 提示：如果能正常响应对话，说明配置成功

1. 打开 code-server Web 界面
2. 点击左侧 扩展图标（方块）
3. 搜索 "Claude Code"
4. 选择 Anthropic 发布的扩展
5. 点击 安装

🔴 重要：使用第三方提供商需跳过登录

方法一：通过设置界面

1. 打开设置（Ctrl+,）
2. 搜索 Claude Code login
3. 勾选 Disable Login Prompt

方法二：手动编辑

编辑 ~/.local/share/code-server/User/settings.json：

{
  "claudeCode.disableLoginPrompt": true
}

方式一：Spark 图标

• 点击编辑器右上角的 ⚡ 图标

方式二：命令面板

• 按 Ctrl+Shift+P
• 输入 "Claude Code"
• 选择打开方式

方式三：状态栏

• 点击右下角的 "✱ Claude Code"

在面板中发送测试消息，正常回复即表示成功 ✅

症状

Error: spawn /path/to/claude code EACCES

原因

• 路径中包含空格
• 配置文件路径错误
• CLI 未正确安装

解决方案

# 步骤 1：检查 VS Code 设置
cat ~/.local/share/code-server/User/settings.json
# 步骤 2：搜索错误路径
grep -r "claude code" ~/.local/share/code-server/User/
# 步骤 3：批量修复
find ~/.local/share/code-server/User/History/ -name "*.json" 
  -exec sed -i '/"claudeCode.claudeProcessWrapper"/d' {} ;
# 步骤 4：验证 CLI 安装
which claude
claude --version
# 步骤 5：重启服务
sudo systemctl restart code-server@$USER
# 步骤 6：刷新浏览器（Ctrl+F5）

症状
显示登录选项（Google/GitHub/Email）但无法登录

解决方案

编辑 ~/.local/share/code-server/User/settings.json：

{
  "claudeCode.disableLoginPrompt": true
}

重启 code-server 并刷新浏览器

症状
执行 /ide 命令时提示找不到可用的 IDE

解决方案

# 1. 确认 code-server 正在运行
# 2. 切换到正确的项目目录
cd ~/claude-code/项目1

# 3. 启动 Claude Code
claude

# 4. 连接 IDE
/ide

💡 确保终端目录与 IDE 打开的项目目录一致

解决方案

# 检查版本
code-server --version  # 需要 1.98.0+
claude --version

# 查看日志
# Ctrl+Shift+P → "Show Logs" → "Extension Host"

# 重载窗口
# Ctrl+Shift+P → "Developer: Reload Window"

解决方案

# 检查配置文件
cat ~/.claude/settings.json

# 验证 JSON 格式
cat ~/.claude/settings.json | jq .

# 检查项目级配置
cat ~/your-project/.claude/settings.local.json

解决方案

# 检查可执行文件权限
ls -la $(which claude)

# 添加执行权限
chmod +x $(which claude)

# 修复 npm 全局目录权限
sudo chown -R $USER:$(id -gn $USER) ~/.npm-global

使用连字符命名目录，避免空格

• ✅ ~/claude-code
• ❌ ~/claude code

重置配置时可安全删除：

• ~/.claude/settings.json
• ~/.local/share/code-server/User/

将配置文件加入版本控制方便同步

# 更新 CLI
npm update -g @anthropic-ai/claude-code
# 更新 code-server
sudo apt-get update && sudo apt-get upgrade code-server

• Claude Code 文档：https://code.claude.com/docs
• code-server 文档：https://coder.com/docs
• 问题反馈：https://github.com/anthropics/claude-code/issues

到此这篇关于VS Code 联动 Claude Code 安装教程的文章就介绍到这了,更多相关VSCode Claude Code安装内容请搜索风君子博客以前的文章或继续浏览下面的相关文章，希望大家以后多多支持风君子博客！