VS Code 集成

架构概述

Code-server 使用 VS Code 的远程服务器架构的修改版本，对其进行了增强，使其能在 Web 浏览器环境中工作。Code-server 不会重新实现 VS Code 的功能，而是嵌入 VS Code 的核心组件并对其进行调整，使其能在 Web 环境中运行。

来源：patches/integration.diff patches/webview.diff patches/proxy-uri.diff

核心组件与初始化

服务器端组件

WebClientServer：负责提供 VS Code Web 客户端的核心组件。它处理 HTTP 请求，创建必要的环境，并连接客户端与 VS Code 的内部。
Remote Extension Host：在服务器端运行 VS Code 扩展，即使在浏览器环境中也能提供完整的扩展功能。
File System Provider：提供对服务器文件系统的访问，支持从浏览器进行文件操作。
Language Packs Service：管理语言包以提供本地化支持。

初始化流程始于 CLI 启动服务器，它会设置 WebClientServer 组件。

来源：patches/integration.diff14-180 lib/vscode/src/vs/server/node/webClientServer.ts

客户端组件

VS Code Web Client：基于浏览器的 UI，镜像 VS Code 的桌面体验。
Monaco Editor：核心编辑器组件，提供文本编辑功能。
Webview System：允许扩展在 iframe 中创建自定义 UI。
Service Worker：提供渐进式 Web 应用 (PWA) 功能以支持离线使用。

来源：patches/service-worker.diff patches/webview.diff

VS Code 打补丁与修改

为了让 VS Code 在具有服务器端功能的浏览器环境中运行，code-server 对 VS Code 代码库应用了几个补丁

源适配：VS Code 通常出于安全原因（vscode-webview.net）从单独的源提供 webview，但 code-server 修改了这一点，使其从同一源提供。
CSP 调整：修改了内容安全策略 (CSP)，允许来自同一源的资源。
Service Worker 集成：添加了 Service Worker 以启用 PWA 功能。
文件系统桥接：创建了连接浏览器文件操作到服务器文件系统的路径。
扩展管理控制：阻止内置扩展进行更新，以保持与 code-server 补丁的兼容性。

来源：patches/webview.diff patches/disable-builtin-ext-update.diff patches/service-worker.diff

Webview 集成

VS Code 使用 webview（iframes）来提供各种功能，如扩展 UI、Markdown 预览和设置 UI。Code-server 修改了此实现，使其能在浏览器环境中工作。

主要修改包括：

从同一源提供 webview，而不是从 vscode-webview.net。
修改 CSP 以将 'self' 添加到允许的源中。
绕过不再需要的跨源检查。
更新哈希检查以进行安全验证。

来源：patches/webview.diff40-110

扩展系统与市场

Code-server 配置 VS Code 的扩展系统以在 Web 环境中工作。

市场集成：默认使用 Open VSX 作为市场，但允许通过环境变量进行自定义。
扩展运行：扩展根据其需求，在浏览器的 Web Worker 或服务器的 Node.js 环境中运行。
遥测处理：增加了支持，将遥测数据定向到可配置的端点。
语言包支持：增强了语言包与远程服务器协同工作的支持。

来源：patches/marketplace.diff patches/telemetry.diff patches/display-language.diff

代理系统与端口转发

Code-server 通过内置的代理系统扩展了 VS Code 的功能，该系统允许通过同一身份验证层访问本地运行的服务。

Proxy URI 环境变量：为扩展提供了一个模板，用于访问运行在特定端口上的服务。
Tunnel Provider：自动转发端口，使其可以通过 code-server 的代理进行访问。
Forwarded Ports 视图：使用户能够在 UI 中查看和管理转发的端口。

来源：patches/proxy-uri.diff29-110

用户界面调整

Code-server 对 VS Code 的用户界面进行了一些调整，以更好地适应 Web 环境。

入门指南页：添加了 code-server 特定的信息和团队部署选项。
文件下载/上传控件：添加了禁用文件下载和上传的选项，以增强安全性。
身份验证 UI：添加了登录和登出功能。
更新通知：添加了 code-server 更新的通知。

来源：patches/getting-started.diff patches/external-file-actions.diff patches/logout.diff patches/update-check.diff

存储与状态管理

Code-server 修改了 VS Code 存储用户设置和状态的方式。

本地存储重定向：用户设置存储在服务器的文件系统中，而不是浏览器存储中，以实现更好的持久性和跨浏览器共享。
基础路径支持：增加了对在路径重写反向代理后面运行的支持。
Source Maps 处理：使 Source Maps 本地托管，以便更好地进行调试。

来源：patches/local-storage.diff patches/base-path.diff patches/sourcemaps.diff

Service Worker 与 PWA 支持

Code-server 为 VS Code 添加了渐进式 Web 应用 (PWA) 功能。

Service Worker 注册：在客户端加载时自动注册 Service Worker。
PWA Manifest：添加了 Web manifest，以便安装为桌面应用。
图标与品牌：用 code-server 的品牌图标替换了 VS Code 的图标。

来源：patches/service-worker.diff patches/integration.diff217-267

身份验证集成

Code-server 为 VS Code 添加了身份验证功能，而 VS Code 本身通常没有用户身份验证的概念。

密码身份验证：添加了基于密码的身份验证支持。
登出功能：添加了登出命令和菜单项。
会话管理：处理用户会话，并在需要时重定向到登录页面。

来源：patches/logout.diff

核心文件结构

code-server 与 VS Code 之间的主要集成点位于以下关键文件中：

组件	目的
`lib/vscode/src/vs/server/node/webClientServer.ts`	提供 VS Code Web 客户端并桥接客户端-服务器通信。
`lib/vscode/src/vs/server/node/server.main.ts`	VS Code 服务器的入口点。
`lib/vscode/src/vs/workbench/browser/client.ts`	code-server 特定功能的客户端代码。
`patches/*.diff`	应用于 VS Code 的各种补丁，以实现 Web 兼容性。

来源： lib/vscode/src/vs/server/node/webClientServer.ts lib/vscode/src/vs/server/node/server.main.ts lib/vscode/src/vs/workbench/browser/client.ts

结论

Code-server 对 VS Code 的集成，代表了 VS Code 架构在浏览器环境中工作的全面适应，同时保持了服务器端的能力。通过战略性的补丁和组件添加，它提供了一个功能齐全的开发环境，可通过 Web 浏览器访问，并提供文件系统访问、终端服务、扩展支持和用户身份验证等功能。