OpenClaw-VSCode：在 VS Code 里玩转 OpenClaw，远程管理+SSH 双剑合璧

摘要：还在频繁切换窗口管理 OpenClaw？试试这款开源 VS Code 插件！通过 WebSocket 直连网关，侧边栏即可聊天交互，配合 VS Code SSH 远程开发，打造丝滑的远程 AI 工作流。

项目地址 ：https://github.com/MaoTouHU/openclaw-vscode

关键词：OpenClaw、VS Code 插件、WebSocket、远程开发、AI 网关

文章目录

[OpenClaw-VSCode：在 VS Code 里玩转 OpenClaw，远程管理+SSH 双剑合璧](#OpenClaw-VSCode：在 VS Code 里玩转 OpenClaw，远程管理+SSH 双剑合璧)
- [一、痛点：为什么需要 OpenClaw-VSCode？](#一、痛点：为什么需要 OpenClaw-VSCode？)
- 二、核心功能一览
- [三、安装与配置（5 分钟上手）](#三、安装与配置（5 分钟上手）)
- - [3.1 安装插件](#3.1 安装插件)
  - [3.2 连接配置](#3.2 连接配置)
- [四、实战：SSH 远程开发工作流](#四、实战：SSH 远程开发工作流)
- 五、命令速查
- 六、技术栈与二次开发
- - 本地开发
  - 项目结构
- 七、常见问题
- 八、参与贡献
- 九、总结

一、痛点：为什么需要 OpenClaw-VSCode？

在使用 OpenClaw 这类 AI 网关时，开发者常面临几个烦恼：

窗口切换频繁 ------ 需要单独打开浏览器或客户端管理对话
远程开发割裂 ------ 用 VS Code SSH 连服务器写代码，却没法直接操作部署在远端的 OpenClaw
配置繁琐 ------ 手动改配置文件容易出错

OpenClaw-VSCode 正是为解决这些问题而生。它将 OpenClaw 的交互能力直接嵌入 VS Code 侧边栏，让你在编码的同时无缝管理 AI 对话。

二、核心功能一览

功能	亮点说明
🌐 WebSocket 远程连接	支持本地/远程网关，实时双向通信
💬 侧边栏聊天界面	原生 VS Code UI 风格，不跳出编辑器
🔐 Token 身份认证	企业级安全验证，防止未授权访问
⚙️ 可视化配置	点击设置，告别手搓 JSON
🔄 自动重连机制	网络波动也不怕，自动恢复连接

三、安装与配置（5 分钟上手）

3.1 安装插件

目前可通过以下方式安装：

方式一 ：VS Code 扩展市场搜索 OpenClaw（待上架）
方式二 ：本地安装 .vsix 文件（见项目 Release）

bash 复制代码

# 克隆项目自行打包
git clone https://github.com/MaoTouHU/openclaw-vscode.git
cd openclaw-vscode
npm install
npm run package
# 在 VS Code 中安装生成的 .vsix 文件

3.2 连接配置

安装后，在 VS Code 左侧活动栏找到 OpenClaw 图标，点击 ⚙️ 配置：

场景 A：本地开发

json 复制代码

{
  "openclaw.gatewayUrl": "ws://localhost:18789",
  "openclaw.gatewayToken": ""
}

场景 B：远程服务器（配合 SSH）

json 复制代码

{
  "openclaw.gatewayUrl": "ws://your-server.com:18789",
  "openclaw.gatewayToken": "your-secret-token"
}

场景 C：生产环境（WSS 加密）

json 复制代码

{
  "openclaw.gatewayUrl": "wss://your-domain.com:18789",
  "openclaw.gatewayToken": "your-secret-token"
}

💡 技巧：配合 VS Code 的 SSH 远程开发功能，你可以在连接远程服务器写代码的同时，直接管理部署在该服务器上的 OpenClaw，无需额外端口映射！

四、实战：SSH 远程开发工作流

这是本插件最香的使用场景：

SSH 连接到远程服务器（VS Code Remote-SSH）
安装 OpenClaw-VSCode 插件（会自动同步到远程）
配置指向本地（对远程而言）的 Gateway
json 复制代码
```
{
  "openclaw.gatewayUrl": "ws://localhost:18789"
}
```
开始边写代码边对话，所有操作都在一个窗口完成

这种"代码+AI"同屏工作流，大幅提升远程开发效率。

五、命令速查

命令	作用
`OpenClaw: 连接到网关`	建立 WebSocket 连接
`OpenClaw: 断开连接`	手动断开当前会话
`OpenClaw: 配置连接`	修改 URL 和 Token

快捷键：Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）打开命令面板。

六、技术栈与二次开发

本项目基于以下技术构建：

TypeScript ------ 类型安全的扩展开发
VS Code Extension API ------ 原生侧边栏 Webview
WebSocket Client ------ 实时通信

本地开发

bash 复制代码

# 1. 克隆仓库
git clone https://github.com/MaoTouHU/openclaw-vscode.git

# 2. 安装依赖
npm install

# 3. 编译并监听
npm run watch

# 4. 按 F5 启动调试（会新开 Extension Development Host 窗口）

项目结构

c 复制代码

openclaw-vscode/
├── src/
│   ├── extension.ts          # 入口文件
│   ├── panel/                # 侧边栏面板逻辑
│   └── websocket/            # WebSocket 连接管理
├── media/                    # UI 资源（HTML/CSS/JS）
└── package.json              # 扩展配置

七、常见问题

Q：连接失败怎么办？

检查 OpenClaw Gateway 是否已启动并监听对应端口
确认防火墙/安全组放行 WebSocket 端口（默认 18789）
查看 VS Code 输出面板（Output > OpenClaw）的详细日志

Q：支持 wss 吗？

完全支持，只需将 URL 协议改为 wss:// 并配置有效证书

Q：Token 如何获取？

在 OpenClaw Gateway 的配置文件中查看或生成

八、参与贡献

本项目采用 MIT 协议 开源，欢迎提交 PR：

🐛 Bug 反馈：GitHub Issues
💡 功能建议：Discussions
🔧 代码贡献：Fork 后提交 PR

Star 支持 ：如果觉得有用，请给项目点个 ⭐ https://github.com/MaoTouHU/openclaw-vscode

九、总结

OpenClaw-VSCode 填补了 OpenClaw 在 IDE 集成方面的空白，特别适合：

需要远程管理 OpenClaw 的开发者
追求All-in-One 工作流的效率党
使用 VS Code SSH 远程开发的用户

立即体验 ：https://github.com/MaoTouHU/openclaw-vscode

本文首发于 CSDN，转载请注明出处。