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？
- 二、核心功能一览
- 三、安装与配置（5 分钟上手）
- 3.1 安装插件
- 3.2 连接配置
- 四、实战：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）
# 克隆项目自行打包gitclone https://github.com/MaoTouHU/openclaw-vscode.gitcdopenclaw-vscodenpminstallnpmrun package# 在 VS Code 中安装生成的 .vsix 文件3.2 连接配置
安装后，在 VS Code 左侧活动栏找到 OpenClaw 图标，点击 ⚙️配置：
场景 A：本地开发
{"openclaw.gatewayUrl":"ws://localhost:18789","openclaw.gatewayToken":""}场景 B：远程服务器（配合 SSH）
{"openclaw.gatewayUrl":"ws://your-server.com:18789","openclaw.gatewayToken":"your-secret-token"}场景 C：生产环境（WSS 加密）
{"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
{"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—— 实时通信
本地开发
# 1. 克隆仓库gitclone https://github.com/MaoTouHU/openclaw-vscode.git# 2. 安装依赖npminstall# 3. 编译并监听npmrunwatch# 4. 按 F5 启动调试（会新开 Extension Development Host 窗口）项目结构
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，转载请注明出处。
