企业官网建设流程全解析

Continue 聊天面板移入 VS Code 右侧边栏：操作指南与视图实现原理

【免费下载链接】continueopen-source coding agent项目地址: https://gitcode.com/GitHub_Trending/co/continue

Continue 是开源的 AI 编程助手，其聊天面板默认以侧边栏 Webview 形式驻留在 VS Code 活动栏（Activity Bar）中，打开后会占据编辑器左侧空间，遮住文件资源管理器。本文将讲解如何把 Continue 聊天面板移动到右侧辅助边栏（Secondary Sidebar），让聊天与文件浏览互不遮挡，并从仓库源码角度说明 Continue 视图的注册与定位机制。读完本文，你将掌握一次拖拽即可完成的布局调整，以及continue.continueGUIView视图在 VS Code 中的完整实现链路。

为什么要把聊天面板放到右侧

Continue 的聊天面板默认注册在活动栏（Activity Bar）的左侧图标区，见 extensions/vscode/package.json 中的viewsContainers.activitybar配置：

"viewsContainers": { "activitybar": [ { "id": "continue", "title": "Continue", "icon": "media/sidebar-icon.png" } ], "panel": [ { "id": "continueConsole", "title": "Continue Console", "icon": "$(window)" } ] }

左侧边栏（Primary Sidebar）通常是文件资源管理器的地盘。当聊天面板与资源管理器共用同一侧边栏时，二者只能互斥显示：打开聊天就会把文件树顶到一边，造成"聊天遮住文件"的尴尬。而 VS Code 自带的辅助边栏（Secondary Sidebar）位于编辑器右侧，可以与其他侧边栏视图同时显示，正好可以用来承载聊天面板：

• 文件与聊天同时可见：右侧边栏独立存在，资源管理器不再被遮挡，左侧继续用于代码编辑和文件导航；
• 充分利用宽屏显示器：右侧边栏可以保留 300~400px 宽度给对话内容，主编辑区依然充裕；
• 随时可逆：该操作只是调整视图停靠位置，不修改任何配置或代码，随时可以拖回原处。

从仓库源码看，Continue 视图本身就是一个标准的WebviewView，其视图类型为continue.continueGUIView（定义在 ContinueGUIWebviewViewProvider.ts），并在 extensions/vscode/package.json 的views中声明为可见：

"views": { "continue": [ { "type": "webview", "id": "continue.continueGUIView", "name": "Continue", "icon": "media/sidebar-icon.png", "visibility": "visible" } ], "continueConsole": [ { "type": "webview", "id": "continue.continueConsoleView", "name": "Continue Console", "icon": "$(window)", "visibility": "visible", "when": "config.continue.enableConsole" } ] }

正因为它是一个标准的 VS Code 视图容器内的视图，所以可以像移动其他视图一样自由拖拽到辅助边栏。

操作步骤：把 Continue 移到右侧边栏

整个过程无需改动任何文件，两步即可完成：

1. 显示 Continue 面板：点击左侧活动栏中的 Continue 图标（即media/sidebar-icon.png），或使用快捷键唤起聊天面板；
2. 拖拽视图：在面板顶部的标题栏区域按住鼠标左键，将 Continue 视图拖到编辑器右侧的辅助边栏位置，松开鼠标即可完成停靠。

拖拽完成后，右侧边栏会显示独立的 Continue 面板，此时再点击文件资源管理器，两边可以同时展开互不干扰——这正是 move-chat-panel-right.md 文档标题所强调的效果："This will prevent the Chat panel from covering your file explorer"。

除拖拽外，也可以在 Continue 视图标题栏的下拉菜单中使用"Move View"（移动视图）相关命令，将其目标位置选择为"Secondary Side Bar"（辅助边栏）；恢复默认时重复同样操作，将视图拖回左侧活动栏即可。

底层原理：Continue 视图的注册与定位

右侧边栏在 VS Code 官方术语中即辅助边栏（Auxiliary Bar / Secondary Sidebar），扩展可以通过视图容器注册来承载自己的面板。Continue 的完整注册链路如下：

1. 声明视图容器：viewsContainers.activitybar注册 id 为continue的容器，并指定图标media/sidebar-icon.png（见上文package.json片段）；
2. 声明视图：views.continue声明 id 为continue.continueGUIView的 Webview 视图，visibility为visible，表示默认可见；
3. 提供视图实现：在扩展激活阶段，VsCodeExtension.ts 调用vscode.window.registerWebviewViewProvider("continue.continueGUIView", this.sidebar, { webviewOptions: { retainContextWhenHidden: true } })，将ContinueGUIWebviewViewProvider实例绑定到该视图 id；
4. 渲染 GUI：ContinueGUIWebviewViewProvider.getSidebarContent()生成包含acquireVsCodeApi()桥接的 HTML 页面，加载gui目录下 Vite 构建的前端资源（开发模式下指向http://localhost:5173），并通过VsCodeWebviewProtocol与核心进程通信。

从源码结构可以推断，视图与容器解耦的设计让 Continue 面板可以像普通视图一样被 VS Code 工作台自由停靠、移动，因此拖拽到右侧边栏并不涉及任何代码层面的特殊处理，纯粹是 VS Code 工作台（Workbench）的内置能力。

与全屏面板的联动

值得一提的是，Continue 在侧边栏之外还提供全屏面板模式。在 commands.ts 中可以看到focusGUI/hideGUI对两种形态的统一处理：

function focusGUI() { const fullScreenTab = getFullScreenTab(); if (fullScreenTab) { fullScreenPanel?.reveal(); // 聚焦全屏面板 } else { vscode.commands.executeCommand("continue.continueGUIView.focus"); // 聚焦侧边栏 } } function hideGUI() { const fullScreenTab = getFullScreenTab(); if (fullScreenTab) { fullScreenPanel?.dispose(); // 关闭全屏面板 } else { vscode.commands.executeCommand("workbench.action.closeAuxiliaryBar"); // 收起辅助边栏 } }

其中注释里出现的workbench.action.focusAuxiliaryBar与workbench.action.closeAuxiliaryBar正是 VS Code 对辅助边栏的原生操作命令——当 Continue 视图被拖到右侧边栏后，这些命令会直接作用于辅助边栏的显示与隐藏，进一步印证了右侧停靠与 VS Code 辅助边栏机制是同一套体系。此外，通过continue.openInNewWindow命令（commands.ts）还可以把 Continue 以全屏 Webview 面板的方式独立打开，适合需要大画幅查看对话与代码改动的场景。

常见问题与提示

• 拖拽不到右侧？请确认 VS Code 版本较新（辅助边栏为 2022 年 7 月 1.70 版本引入的特性），并确保没有把工作台布局锁定；部分旧版本需要通过标题栏菜单的 "Move View" 完成迁移。
• 右侧边栏会随聊天自动展开/收起吗？不会。右侧边栏的展开与收起完全由工作台状态控制，continue.continueGUIView.focus只会聚焦视图而不会强制改变布局，这与左侧边栏的行为一致。
• 如何恢复默认布局？直接把 Continue 视图从右侧拖回左侧活动栏即可，或者通过命令面板执行"View: Reset View Locations"（重置视图位置）恢复所有视图的默认停靠。
• 面板内容会被清空吗？不会。扩展在注册视图时指定了retainContextWhenHidden: true（见 VsCodeExtension.ts），即使视图被隐藏，其 Webview 上下文也会保留，对话历史与界面状态不会丢失。

小结

把 Continue 聊天面板移到右侧边栏，是一次零成本、零配置的工作台布局优化：只需一次拖拽，即可让聊天与文件资源管理器同时可见。从实现角度看，Continue 通过 package.json 声明活动栏视图容器与 Webview 视图，再由 ContinueGUIWebviewViewProvider.ts 提供渲染实现，最终由 VsCodeExtension.ts 完成注册——这套标准化的视图体系保证了面板可以自由停靠在 VS Code 工作台的任意一侧。

【免费下载链接】continueopen-source coding agent项目地址: https://gitcode.com/GitHub_Trending/co/continue