OpenClaw-VSCode：在 VS Code 中通过 WebSocket 远程管理 OpenClaw 网关的完整方案

在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾

"写代码和用 AI，终于不用来回切窗口了！"

作为一名程序员，你是不是也经历过这种痛苦：

• 左边 VS Code 写代码，右边浏览器开 OpenClaw
• 远程服务器上部署了 AI 网关，管理起来超麻烦
• 配置个连接要改半天 JSON，手一抖就报错

今天给大家介绍一个开源神器------OpenClaw-VSCode ，直接把 OpenClaw 塞进 VS Code 侧边栏，让你边写代码边「撸猫」（聊 AI）！

### 文章目录

• [在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)
• [@toc](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)
• [🎯 这玩意儿能干啥？](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)
• [🚀 5 分钟上手](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)
• [第一步：装插件](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)
• [第二步：填地址](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)
• [第三步：开聊！](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)
• [💡 神仙用法：SSH 远程开发组合拳](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)
• [🛠️ 配置小技巧](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)
• [🤔 可能遇到的问题](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)
• [🌟 为什么开源？](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)
• [📝 总结](#文章目录 在 VS Code 里「养」一只 OpenClaw大龙虾🦞，边写代码边聊天太爽了！🐾 @[toc] 🎯 这玩意儿能干啥？ 🚀 5 分钟上手 第一步：装插件 第二步：填地址 第三步：开聊！ 💡 神仙用法：SSH 远程开发组合拳 🛠️ 配置小技巧 🤔 可能遇到的问题 🌟 为什么开源？ 📝 总结)

🎯 这玩意儿能干啥？

简单说，它就是一个VS Code 插件，让你通过 WebSocket 连接 OpenClaw 网关，在编辑器里直接聊天交互。

三大爽点：

爽点	体验
🖥️ 侧边栏即开即聊	不用切窗口，编码对话两不误
🔗 SSH 远程无缝管	配合 VS Code 远程开发，服务器上的 OpenClaw 直接掌控
⚙️ 点点鼠标就配置	可视化设置，告别手搓配置文件

---

🚀 5 分钟上手

第一步：装插件

# 方式1：等上架后直接在 VS Code 扩展商店搜"OpenClaw"
# 方式2：动手党从源码编译
git clone https://github.com/MaoTouHU/openclaw-vscode.git
cd openclaw-vscode && npm install && npm run package

第二步：填地址

点击侧边栏的 OpenClaw 图标 → ⚙️ 配置：

本地玩耍版：

ws://localhost:18789

远程服务器版（配合 SSH 超香）：

ws://你的服务器IP:18789
Token: 你的密钥

加密生产版：

wss://你的域名:18789

第三步：开聊！

点击「连接」，绿灯一亮，直接在侧边栏输入消息，OpenClaw 的回复实时显示。

---

💡 神仙用法：SSH 远程开发组合拳

这是我觉得最香的使用场景，没有之一：

场景： 你在家里，通过 VS Code SSH 连到公司服务器写代码，服务器上跑了 OpenClaw 网关。

以前： 要单独开终端/浏览器连服务器管理 OpenClaw，窗口切来切去。

现在：

1. SSH 连上服务器，打开项目
2. OpenClaw-VSCode 自动跟随到远程环境
3. 配置 ws://localhost:18789（对远程服务器而言就是本地）
4. 写代码、调 AI、看日志，一个窗口全搞定！

这种 All-in-One 的感觉，用过就回不去了。

---

🛠️ 配置小技巧

自动连接（懒人必备）：

{
  "openclaw.autoConnect": true
}

常用命令：

• Ctrl+Shift+P → 输入 OpenClaw
• 看到「连接到网关」「断开连接」「配置连接」三个选项

断网也不怕： 插件自带自动重连，网络恢复后自动续上会话。

---

🤔 可能遇到的问题

Q：连不上？

• 先检查 OpenClaw 网关是否真的跑起来了
• 看看端口有没有被防火墙拦（默认 18789）
• 看 VS Code 底部「输出」面板选 OpenClaw，有详细日志

Q：Token 从哪来？

• 在你部署的 OpenClaw Gateway 配置里找，或者问管理员要

Q：安全吗？

• 支持 WSS 加密连接，Token 验证也安排上了，企业用也没问题

---

🌟 为什么开源？

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

作者把代码完全开源（MIT 协议），意味着你可以：

• ✅ 免费使用
• ✅ 随意修改
• ✅ 商用也没问题
• ✅ 欢迎提交 PR 一起完善

觉得有用？去 GitHub 点个 ⭐ 支持一下！ 这对开源作者真的是很大的鼓励。

---

📝 总结

如果你也是：

• VS Code 重度用户
• OpenClaw 玩家
• 经常远程开发的程序员

那这个插件绝对是你的效率神器。代码和 AI 对话，终于能在同一个窗口里完成了！

快去试试吧，有问题欢迎在评论区交流～

---

📌 项目信息

• 开源forks地址：https://github.com/MaoTouHU/openclaw-vscode
• 协议：MIT
• 要求：VS Code 1.80.0+

---

本文介绍的开源工具仅供学习交流，请遵守相关使用规范。

---

【互动话题】 你平时是怎么管理 AI 工具的？单窗口还是多窗口？评论区聊聊 👇