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

2026-05-05阅读 0热度 0

开源 Github AIGC vscode AI编程

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 页面获取）。

# 克隆项目自行打包
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：本地开发环境

{
"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 对话，所有操作都在同一个窗口内完成。

这种"代码+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. 克隆仓库
git clone https://github.com/MaoTouHU/openclaw-vscode.git
# 2. 安装依赖
npm install
# 3. 编译并监听
npm run watch
# 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:// 并配置有效的 SSL 证书即可。

Q：Token 如何获取？

在 OpenClaw Gateway 的配置文件中查看或生成相应的 Token。

八、参与贡献

本项目采用 MIT 协议开源，欢迎社区参与贡献：

???? 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，转载请注明出处。

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