VS Code 集成

Sink 内置了 VS Code（通过 code-server 实现），允许你在浏览器中直接编辑和管理 Workspace 中的文件。本指南介绍如何启用和使用 VS Code 功能。

什么是 VS Code 集成？

Sink 集成了 code-server，这是一个在浏览器中运行的 VS Code。它允许你：

• 浏览和编辑 Workspace 目录中的所有文件
• 查看任务相关的文件和目录结构
• 在浏览器中使用完整的 VS Code 功能
• 无需安装任何额外的本地软件

访问 VS Code

在 Sink Web UI 中：

1. 点击主菜单中的 Code Server
2. 或直接访问 http://localhost:5000/api/vscode/default（将 default 替换为你的工作区 ID，并根据 Gateway 配置调整地址和端口）

VS Code 管理页面

VS Code 管理页面提供以下功能：

启动 VS Code

如果 VS Code 尚未运行，你会看到一个 启动 按钮。点击它启动 code-server 进程。

第一次启动可能需要 10-30 秒，请耐心等待。

查看状态

页面顶部显示当前 VS Code 的状态：

• 未启动 — code-server 进程尚未运行
• 启动中 — code-server 正在启动
• 就绪 — code-server 已运行，可以使用
• 停止中 — code-server 正在关闭
• 错误 — code-server 遇到错误

打开 VS Code

VS Code 就绪后，你可以通过两种方式打开：

在新标签页打开

点击 在新标签页打开 按钮，VS Code 会在浏览器新标签页中打开，提供最大的工作空间。

在 Canvas 中打开

点击 在 Canvas 中打开 按钮，VS Code 会作为一个窗口嵌入到 Canvas 画布中，允许你同时查看任务和编辑代码。

停止 VS Code

如果需要释放系统资源，可以点击 停止 按钮关闭 VS Code。停止是安全的，任何时候都可以重新启动。

在 VS Code 中工作

文件浏览

VS Code 打开时，左侧边栏显示 Workspace 的文件树。你可以：

• 浏览文件和文件夹 — 点击展开或折叠目录
• 创建新文件 — 右键点击目录，选择”新建文件”
• 编辑文件 — 点击文件在编辑器中打开

查看任务文件

Workspace 中的任务文件存储在 .sink/tasks/ 目录中：

<workspace-path>/
  .sink/
    tasks/
      <task-id>/           # 每个任务的工作目录
        .sink/          # 任务本地配置
        CLAUDE.md          # Agent 指令文件（引用）
        ...                # 任务相关文件

你可以通过 VS Code 浏览这些文件，但通常不需要直接编辑它们。

配置 Workspace

.sink/ 目录中包含 Workspace 级配置文件：

• settings.json — 环境变量和日志设置
• mcp.json — MCP Server 配置
• runtimes.json — Agent Runtime 配置
• profiles/ — Agent Profile 定义
• skills/ — Agent Skill 定义

这些配置文件可以直接在 VS Code 中编辑，修改会在下次任务启动时生效。

代码编辑

VS Code 提供完整的代码编辑功能：

• 语法高亮 — 自动识别文件类型
• 自动缩进 — 智能格式化代码
• 搜索和替换 — Ctrl+H 打开替换对话框
• 多选编辑 — Ctrl+D 选择下一个匹配项
• 内置终端 — `Ctrl+`` 打开终端，在 Workspace 中运行命令

配置 VS Code

扩展和主题

code-server 支持许多 VS Code 扩展。你可以通过 VS Code 的扩展市场安装扩展。

注意：某些计算密集型扩展可能在浏览器环境中性能较差。

快捷键

VS Code 的标准快捷键在 code-server 中完全可用：

常见场景

场景 1：查看任务配置

1. 启动 VS Code
2. 打开 .sink/ 目录
3. 编辑 profiles/ 中的 Profile 文件
4. 保存后，新创建的任务会使用更新的配置

场景 2：配置 MCP Server

1. 启动 VS Code
2. 打开 .sink/mcp.json
3. 添加或编辑 MCP Server 配置
4. 保存文件，下次任务启动时生效

场景 3：在 Canvas 中查看代码

1. 访问 Canvas 页面
2. 点击 在 Canvas 中打开 按钮
3. VS Code 窗口出现在 Canvas 中
4. 同时查看任务和编辑代码

场景 4：运行命令

1. 启动 VS Code
2. 按 `Ctrl+`` 打开终端
3. 在 Workspace 目录中运行任何 shell 命令

注意事项

浏览器要求

• 需要现代浏览器支持（Chrome、Firefox、Safari、Edge 等）
• 某些高级功能可能需要特定浏览器特性
• 性能最佳的浏览器：Chrome 和 Firefox

文件大小限制

编辑非常大的文件（>10MB）可能会导致浏览器性能下降。

存储空间

code-server 进程会占用一定的系统内存和存储空间。如果长期不使用，可以停止它来释放资源。

故障排除

VS Code 无法启动

症状：点击启动按钮后仍显示”未启动”

检查项：

1. 检查系统是否有足够的内存和存储空间
2. 查看 Gateway 日志获取详细错误信息
3. 尝试在 Workspace 中手动运行 code-server：

   code-server --version
   

如果命令未找到，可能需要在 settings.json 中配置 code-server 路径——参见下面的示例。

配置 code-server 命令

{
  "ide": {
    "codeServer": {
      "command": "/usr/local/bin/code-server"
    }
  }
}

VS Code 无响应或很慢

症状：VS Code 启动后加载缓慢或输入有延迟

解决方案：

1. 刷新浏览器
2. 关闭其他浏览器标签页释放内存
3. 停止 VS Code 重新启动：
   • 点击 停止 按钮
   • 等待停止完成
   • 点击 启动 按钮重新启动
4. 检查网络连接质量

无法保存文件

症状：编辑后文件无法保存

检查项：

1. 检查文件权限 — 在终端中运行：

   ls -l /path/to/file
   

2. 检查磁盘空间是否充足
3. 确保没有其他进程锁定该文件

Canvas 中的 VS Code 窗口不显示

症状：点击”在 Canvas 中打开”后 VS Code 未出现在 Canvas 中

解决方案：

1. 刷新 Canvas 页面
2. 确保 VS Code 已启动并就绪（检查 VS Code 管理页面）
3. 在浏览器的新标签页中手动打开 VS Code，验证其可以正常工作

后续步骤

1. 快速开始教程 — 创建你的第一个任务
2. Canvas 工作区 — 了解如何在 Canvas 中组织多个窗口