SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场code-server-remote-ide-wsl2

code-server-remote-ide-wsl2

编程与开发

查看项目

更新于 10-15 11:17

技能介绍

用途

本技能用于在 WSL2 环境中搭建 code-server（浏览器版 VS Code），并通过 ngrok、Cloudflare Tunnel 或 Tailscale 建立加密隧道，让用户从手机、平板或远程电脑安全访问完整的 VS Code IDE。适用于需要远程进行完整开发工作的场景，例如在平板上配键盘编码、旅行中处理大型代码库、使用 IntelliSense、调试和扩展。

主要能力

  • 在 WSL2 上安装并运行 code-server（浏览器版 VS Code）。
  • 配置安全认证，防止 CVE-2023-26114，使用哈希密码。
  • 建立加密隧道（ngrok / Cloudflare Tunnel / Tailscale）。
  • 管理 VS Code 扩展。
  • 优化 WSL2 资源（内存/CPU 限制）。
  • 提供一键启动、停止、状态查询操作。
  • 自动显示连接 URL 和凭据。

使用方式

前置要求

  • WSL2 已安装并可用（推荐 Ubuntu 22.04 LTS）。
  • Windows 10 版本 2004+ 或 Windows 11。
  • 最低：4GB 内存、2 核 CPU、2GB 磁盘空间；推荐：8GB+ 内存、4+ 核 CPU、5GB+ 磁盘空间。
  • 需要互联网连接。
  • 用户需熟悉 VS Code 桌面版、基本命令行操作，并能创建隧道服务的免费账户。

快速开始

  1. 安装：
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./install.sh

按提示安装 code-server、选择隧道服务（初学者推荐 ngrok）并安装对应工具。

  1. 配置认证：
./configure-auth.sh

生成强哈希密码并配置安全访问。

  1. 配置资源（推荐）：
./configure-resources.sh

设置 WSL2 内存/CPU 限制，防止资源耗尽。

  1. 启动会话：
./code-server-start.sh

启动 code-server 和隧道，显示连接 URL 和密码。

  1. 连接与编码：在浏览器中打开显示的 URL，输入密码即可使用完整 VS Code IDE。

  2. 停止会话：

./code-server-stop.sh

详细工作流

步骤 1：一次性安装

运行安装脚本，选择隧道服务：

  • ngrok：适合初学者，免费层每月 1GB 带宽，URL 每次重启变化。
  • Cloudflare Tunnel：适合生产，无限带宽（免费），持久 URL，性能更好，设置稍复杂。
  • Tailscale：适合私有访问，私有网络不暴露公网，无限带宽，需要连接设备也安装 Tailscale。

推荐从 Cloudflare Tunnel 开始（IDE 需要较大带宽）。

获取隧道认证令牌：

  • ngrok：注册后复制 authtoken，运行 ngrok config add-authtoken YOUR_TOKEN_HERE。
  • Cloudflare Tunnel：注册后按安装程序提示完成 cloudflared tunnel login。
  • Tailscale：注册后运行 sudo tailscale up 并完成认证。

验证安装：

code-server --version
ngrok version           # 或 cloudflared --version 或 tailscale version
./health-check.sh

步骤 2：配置认证

运行 ./configure-auth.sh，生成 16 位强密码（或自定义），哈希后写入 ~/.config/code-server/config.yaml，权限设为 600。密码会显示，需妥善保存。明文密码存储在 ~/.code-server/.env 供脚本使用。

步骤 3：配置资源（推荐）

运行 ./configure-resources.sh，检测系统内存，推荐限制（总内存的 50-75%），生成 .wslconfig，提示重启 WSL。

推荐资源限制示例：

  • 8GB 内存 → WSL2 限制 4GB，2 处理器。
  • 16GB → 8GB，4 处理器。
  • 32GB+ → 12-16GB，6-8 处理器。

.wslconfig 示例：

[wsl2]
memory=8GB
processors=4
swap=2GB

应用：在 PowerShell（管理员）运行 wsl --shutdown，等待 8 秒后启动 wsl，用 free -h 和 nproc 验证。

步骤 4：启动会话

运行 ./code-server-start.sh，脚本会检查资源、加载配置、在 localhost:8080 启动 code-server、启动隧道、提取公网 URL、显示连接信息和密码。

保持终端运行：可直接保持终端打开，或使用 ./code-server-start.sh & disown 后台运行。

步骤 5：连接与使用 IDE

在任意设备浏览器打开 URL，输入密码登录。可使用文件资源管理器、编辑器、IntelliSense、集成终端、扩展、Git 集成、调试、搜索、多文件编辑。首次使用需打开文件夹、安装扩展、配置设置。

移动/平板使用：平板配键盘适合严肃编码；手机适合快速编辑、代码审查、运行命令，不建议长时间编码或复杂调试。

断开连接：关闭浏览器标签即可，code-server 继续运行。

步骤 6：管理扩展与资源

安装扩展：通过 UI 或 CLI：

./manage-extensions.sh
# 或
code-server --install-extension EXTENSION_ID

常用扩展：Python (ms-python.python)、ESLint (dbaeumer.vscode-eslint)、Prettier (esbenp.prettier-vscode)、GitLens (eamonn.gitlens)、Docker (ms-azuretools.vscode-docker)。

兼容性：语言支持、linter、格式化工具、Git 工具、主题、图标、代码片段通常可用；需要桌面集成、原生模块或某些调试器的扩展可能不可用。

监控资源：./code-server-status.sh 显示内存、CPU、会话时长、扩展数量。

步骤 7：停止会话

运行 ./code-server-stop.sh，优雅终止隧道和 code-server 进程，报告最终资源使用。用 ./code-server-status.sh 验证已停止。停止可节省资源、数据（ngrok 免费层限制）并提高安全性。

步骤 8：检查状态

运行 ./code-server-status.sh 查看运行状态、连接 URL、密码、会话时长、资源使用、系统资源、扩展数量。

适用场景

  • 需要远程完整 IDE 功能。
  • 在平板上配键盘编码。
  • 需要 IntelliSense、调试、扩展。
  • 旅行中进行严肃开发工作。
  • 远程审查/编辑大型代码库。

限制

  • 仅需快速终端命令时，应使用 ttyd-remote-terminal-wsl2 而非本技能。
  • 需要桌面版 VS Code 特有功能时可能不适用。
  • 系统资源有限（<4GB 内存）时不推荐。
  • 互联网连接很慢时不推荐。
  • 部分扩展可能不兼容浏览器版。
  • ngrok 免费层有每月 1GB 带宽限制，URL 每次重启变化。
  • Tailscale 需要连接设备也安装 Tailscale。

安全说明

  • 密码在 config.yaml 中哈希存储，权限 600。
  • 明文密码存储在 ~/.code-server/.env 供脚本使用。
  • 不要分享密码，不要将配置文件提交到 git。
  • 定期更改密码：重新运行 ./configure-auth.sh。
  • 仅与信任的人分享 URL。
  • URL 为 HTTPS 加密。
  • 会话在停止前一直活跃，完成后记得停止。