广告位联系
返回顶部
分享到

VS Code 联动 Claude Code安装教程

Ai 来源:互联网 作者:佚名 发布时间:2026-09-26 20:53:09 人浏览
摘要

适用系统:Ubuntu 1. 前置准备 1.1 系统要求 操作系统:Ubuntu 20.04 或更高版本 Node.js:18.x 或更高版本 npm:9.x 或更高版本 1.2 检查环境版本 1 2 node --version npm --version 版本过低?使用 nvm 安装最新版

适用系统:Ubuntu 

1. 前置准备

1.1 系统要求

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

1.2 检查环境版本

1

2

node --version

npm --version

版本过低? 使用 nvm 安装最新版本:

1

2

3

4

5

6

# 安装 nvm

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

# 重新加载 shell

source ~/.bashrc

# 安装最新 LTS 版本

nvm install --lts

1.3 创建工作目录

?? 重要:目录名使用连字符(-),避免空格

1

2

mkdir -p ~/claude-code

cd ~/claude-code

2. 安装 Claude Code CLI

2.1 全局安装

1

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

2.2 验证安装

1

claude --version

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

3. 安装 code-server

3.1 下载并安装

1

2

3

4

5

6

7

8

# 下载最新版本

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

3.2 配置 code-server

1

2

3

4

5

6

7

8

9

# 创建配置目录

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

3.3 启动服务

方式一:手动启动

1

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

方式二:系统服务(推荐)

1

2

sudo systemctl enable code-server@$USER

sudo systemctl start code-server@$USER

3.4 访问 Web 界面

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

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

4. 配置 Claude Code

4.1 交互式配置

1

claude configure

按提示完成配置:

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

4.2 手动配置(高级)

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

使用第三方提供商示例:

1

2

3

4

5

6

7

8

9

10

11

{

  "env": {

    "ANTHROPIC_BASE_URL": "https://api.z.ai/api/anthropic",

    "ANTHROPIC_AUTH_TOKEN": "你的认证令牌",

    "API_TIMEOUT_MS": "3000000"

  },

  "enabledPlugins": {

    "你的插件名": true

  },

  "language": "chinese"

}

4.3 验证配置

1

claude

???? 提示:如果能正常响应对话,说明配置成功

5. 安装 Claude Code VS Code 扩展

5.1 通过扩展市场安装

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

5.2 配置扩展

???? 重要:使用第三方提供商需跳过登录

方法一:通过设置界面

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

方法二:手动编辑

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

1

2

3

{

  "claudeCode.disableLoginPrompt": true

}

5.3 打开 Claude Code 面板

方式一:Spark 图标

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

方式二:命令面板

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

方式三:状态栏

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

5.4 测试连接

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

6. 常见问题及解决方案

? 问题 1:Failed to spawn Claude Code process

症状

1

Error: spawn /path/to/claude code EACCES

原因

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

解决方案

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

# 步骤 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)

? 问题 2:登录界面卡住

症状
显示登录选项(Google/GitHub/Email)但无法登录

解决方案

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

1

2

3

{

  "claudeCode.disableLoginPrompt": true

}

重启 code-server 并刷新浏览器

? 问题 3:终端无法连接 IDE

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

解决方案

1

2

3

4

5

6

7

8

9

# 1. 确认 code-server 正在运行

# 2. 切换到正确的项目目录

cd ~/claude-code/项目1

 

# 3. 启动 Claude Code

claude

 

# 4. 连接 IDE

/ide

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

? 问题 4:扩展安装后无响应

解决方案

1

2

3

4

5

6

7

8

9

# 检查版本

code-server --version  # 需要 1.98.0+

claude --version

 

# 查看日志

# Ctrl+Shift+P → "Show Logs" → "Extension Host"

 

# 重载窗口

# Ctrl+Shift+P → "Developer: Reload Window"

? 问题 5:环境变量不生效

解决方案

1

2

3

4

5

6

7

8

# 检查配置文件

cat ~/.claude/settings.json

 

# 验证 JSON 格式

cat ~/.claude/settings.json | jq .

 

# 检查项目级配置

cat ~/your-project/.claude/settings.local.json

? 问题 6:权限错误 (EACCES)

解决方案

1

2

3

4

5

6

7

8

# 检查可执行文件权限

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/

? 版本控制

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

? 保持更新

1

2

3

4

5

# 更新 CLI

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

 

# 更新 code-server

sudo apt-get update && sudo apt-get upgrade code-server


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计