跳轉到主要內容

適用場景

有些開發場景下,你可能需要使用本地 IDE:
  • 大型專案開發(數百個檔案)
  • 使用已配置好的本地開發環境
  • 需要特定的付費擴充或企業工具
  • 習慣本地 IDE 的快捷鍵與工作流程
好消息:透過 VS Code Remote Tunnels,可以輕鬆連接到 Happycapy 雲端沙箱!

準備工作

開始之前,請確保你有:

Happycapy 帳號

訪問 happycapy.ai 註冊

VS Code 1.70+

GitHub 帳號

用於 tunnel 授權

網路連線

遠端訪問需要穩定的連線

3 步完成連接

1

在 Happycapy 啟動 Tunnel

在 Happycapy 對話框中輸入:
請幫我啟動 VSCode Remote Tunnel(全局模式)--name Happycapy,並展示 GitHub 認證連結與驗證碼
Happycapy 會自動安裝並啟動 Tunnel,然後回傳:
記下這兩個資訊:
  • 授權頁面:https://github.com/login/device
  • 授權碼:XXXX-XXXX(8 位代碼)
2

GitHub 授權

在瀏覽器中完成授權(約 1 分鐘):
  1. 開啟 https://github.com/login/device
  2. 輸入 Happycapy 提供的授權碼
  3. 點擊 Authorize
成功標誌:瀏覽器顯示 “Success! You may close this page.”
3

從本地 VS Code 連接

  1. 打開本地 VS Code
  2. Ctrl + Shift + X 開啟擴充面板
  3. 搜索 Remote - Tunnels(Microsoft 官方)
  4. 點擊 Install
  1. F1 開啟命令面板
  2. 輸入:Remote-Tunnels: Connect to Tunnel
  3. 登入 GitHub(首次需要)
  4. 選擇 Happycapy
  5. 等待連接建立
成功標誌:左下角顯示綠色 >< Remote [Happycapy]

開始使用

連接成功後,你可以像在本地一樣使用 Happycapy 沙箱:

打開遠端資料夾

1

點擊 'Open Folder...'

從 VS Code 檔案選單或歡迎畫面
2

輸入資料夾路徑

常用路徑:
  • /home/node - 你的主目錄
  • /workspace - 你的工作區目錄
3

信任工作區

出現提示時點擊「是的,我信任作者」

打開終端機

按 `Ctrl + “ (反引號) 開啟遠端終端機。
驗證連接: 執行 pwdwhoami 確認你在雲端沙箱中

快速參考

Happycapy Prompt 速查

操作Prompt
啟動 Tunnel請幫我啟動 VSCode Remote Tunnel(全局模式)--name Happycapy,並展示 GitHub 認證連結與驗證碼
檢查狀態VSCode Tunnel 還在運行嗎?
停止服務請停止 VSCode Tunnel 服務
重新啟動請重新啟動 VSCode Tunnel

VS Code 快捷鍵

操作快捷鍵
打開資料夾Ctrl + K, 然後 Ctrl + O
打開終端機`Ctrl + “
命令面板F1Ctrl + Shift + P
快速開啟Ctrl + P
中斷連接點擊左下角 >< Remote 標誌

疑難排解

  1. 在 Happycapy 中問:「VSCode Tunnel 還在運行嗎?」
  2. 如果沒有運行,重新執行啟動 prompt
  3. 檢查本地網路連線
  4. 重新登入 GitHub:
    • F1Remote-Tunnels: Sign out
    • 然後重新連接並登入
嘗試以下步驟:
  1. 檢查網路連線
  2. 暫時關閉 VPN(如果正在使用)
  3. 在 Happycapy 中重啟 Tunnel
  4. 更新 VS Code 到最新版本
  1. 檢查磁碟空間:在遠端終端機執行 df -h
  2. 檢查檔案權限:執行 ls -la
  3. 嘗試重新連接 Tunnel
某些擴充需要安裝在遠端伺服器上:
  1. 開啟擴充面板 (Ctrl + Shift + X)
  2. 尋找有「Install in SSH: Happycapy」按鈕的擴充
  3. 點擊安裝到遠端伺服器

最佳實踐

日常快速工作

使用 Happycapy 網頁界面進行快速任務和對話

複雜專案

切換到本地 VS Code 進行大規模開發和重構
網頁界面和 VS Code 都連接到同一個雲端沙箱,因此在它們之間切換時無需檔案遷移!

你已經準備好了!

現在你已經掌握了將本地 VS Code 連接到 Happycapy 雲端沙箱的完整流程。享受你的雲端開發之旅吧!

需要更多幫助?

聯繫我們的支援團隊尋求協助