Web 版 Visual Studio Code

Web 版 Visual Studio Code 提供了一种免费、无需安装的 Microsoft Visual Studio Code 体验，它完全在您的浏览器中运行，使您能够快速安全地浏览源代码存储库并进行轻量级的代码更改。要开始使用，请在您的浏览器中访问 https://vscode.dev。

Web 版 VS Code 具有您喜爱的 VS Code 桌面版的许多功能，包括在浏览和编辑时进行搜索和语法突出显示，以及扩展支持，以便处理您的代码库并进行更简单的编辑。除了从 GitHub 和 Azure Repos 等源代码控制提供程序打开存储库、分支和拉取请求外，您还可以处理存储在本地计算机上的代码。

Web 版 VS Code 完全在您的 Web 浏览器中运行，因此与桌面体验相比存在某些限制，您可以在下面了解更多信息。

以下视频简要概述了 Web 版 Visual Studio Code。

与 VS Code 桌面版的关系

Web 版 VS Code 提供了一种基于浏览器的体验，用于导航文件和存储库以及提交轻量级的代码更改。但是，如果您需要访问运行时来运行、构建或调试代码，您想使用终端等平台功能，或者您想运行 Web 中不支持的扩展，我们建议您将工作转移到桌面应用程序、GitHub Codespaces，或者使用 远程 - 隧道来获得 VS Code 的全部功能。此外，VS Code 桌面版还允许您使用不受浏览器限制的全套键盘快捷键。

当您准备好切换时，您只需单击几下即可“升级”到完整的 VS Code 体验。

您还可以通过选择齿轮图标，然后选择切换到 Insiders 版本...，或者直接导航到 https://insiders.vscode.dev，在 Web 版 VS Code 的稳定版和 Insiders 版本之间进行切换。

打开项目

通过导航到 https://vscode.dev，您可以创建新的本地文件或项目，处理现有的本地项目，或者访问托管在其他地方的源代码存储库，例如 GitHub 和 Azure Repos（Azure DevOps 的一部分）。

您可以使用命令面板 (F1) 中的文件 > 新建文件，在 Web 中创建一个新的本地文件，就像在 VS Code 桌面环境中一样。

GitHub 存储库

您可以使用以下格式的 URL 直接在 Web 版 VS Code 中打开 GitHub 存储库：https://vscode.dev/github/<组织>/<存储库>。以VS Code 存储库为例，它看起来像这样：https://vscode.dev/github/microsoft/vscode。

此体验在自定义的 vscode.dev/github URL 中提供，该 URL 由 GitHub 存储库扩展（它是更广泛的 远程存储库扩展的一部分）提供支持。

GitHub 存储库允许您从编辑器中远程浏览和编辑存储库，而无需将代码拉到本地计算机上。您可以在我们的 GitHub 存储库指南中了解有关该扩展及其工作原理的更多信息。

注意：GitHub 存储库扩展也可以在 VS Code 桌面版中使用，以提供快速的存储库浏览和编辑。安装扩展后，您可以使用 GitHub 存储库：打开存储库...命令打开存储库。

您还可以通过为 Chrome 和 Edge 安装 vscode.dev 扩展，通过浏览器的搜索栏（又称地址栏）在 vscode.dev 中打开 GitHub 存储库。然后，输入 code 以激活地址栏，后跟您的存储库名称。建议会从您的浏览器搜索历史记录中填充，因此如果您想要的存储库没有出现，您还可以输入完整的 <所有者>/<存储库> 名称来打开它，例如 microsoft/vscode。

如果您已经在 https://vscode.dev 的 Web 版 VS Code 中，您还可以通过 远程存储库扩展命令导航到不同的存储库。选择状态栏左下角的远程指示器，您将看到打开远程存储库...命令。

Azure Repos

您可以像在 Web 版 VS Code 中打开 Github 存储库一样打开 Azure Repos。

当您导航到具有 https://vscode.dev/azurerepos/<组织>/<项目>/<存储库> 格式的 URL 时，您将能够读取、搜索存储库中的文件并将更改提交到 Azure Repos。您可以获取、拉取和同步更改，并查看分支。

您可以通过将 vscode.dev 添加到 Azure Repos URL 的前缀，在 Web 版 VS Code 中打开 Azure Repos 中的任何存储库、分支或标记。

或者，当您在 Azure DevOps 存储库或拉取请求中时，您可以按 (.) 在 Web 版 VS Code 中打开它。

更多自定义 URL

与桌面版一样，您可以通过丰富的扩展生态系统自定义 Web 版 VS Code，这些扩展几乎支持每个后端、语言和服务。vscode.dev 包括提供常用体验快捷方式的 URL。

我们已经探索了几个 URL（vscode.dev/github 和 vscode.dev/azurerepos）。以下是更完整的列表

请注意，某些 URL 必须以特定方式输入（例如，vscode.dev/editor/liveshare 需要一个活动的 Live Share 会话）。请查看每个服务的文档以获取具体的访问和使用信息。

以下是关于其中一些 URL 的更多信息。

主题

您可以通过 VS Code Web 版，使用 URL 模式 https://vscode.dev/editor/theme/<extensionId> 来分享和体验颜色主题。

例如，您可以访问 https://vscode.dev/editor/theme/sdras.night-owl 来体验 Night Owl 主题，而无需经历下载和安装过程。

注意：颜色主题 URL 模式适用于完全声明式（无代码）的主题。

一个扩展可以定义多个主题。您可以使用 /editor/theme/<extensionId>/<themeName> 模式。如果没有指定 themeName，VS Code Web 版将采用第一个主题。

作为主题作者，您可以在您的扩展 README 中添加以下徽章，以便用户可以轻松地在 VS Code Web 版中试用您的主题（将 <extensionId> 替换为您主题扩展的唯一标识符）

[![Preview in vscode.dev](https://img.shields.io/badge/preview%20in-vscode.dev-blue)](https://vscode.dev/editor/theme/<extensionId>)

Visual Studio Live Share

Live Share 来宾会话可通过 https://vscode.dev/editor/liveshare URL 在浏览器中使用。sessionId 将传递给扩展程序，以实现无缝加入体验。

在不同环境中继续工作

在某些情况下，您需要访问具有运行代码能力的不同环境。您可以切换到在支持本地文件系统和完整语言及开发工具的开发环境中处理存储库。

GitHub Repositories 扩展使您可以轻松地在本地克隆存储库、在桌面上重新打开它，或为当前存储库创建 GitHub 代码空间（如果您安装了 GitHub Codespaces 扩展并有权创建 GitHub 代码空间）。要执行此操作，请使用命令面板 (F1) 中提供的 Continue Working On...（继续工作于...） 命令，或单击状态栏中的“远程”指示器。

保存和共享工作

在 Web 上处理本地文件时，如果启用了 自动保存，您的工作将自动保存。您也可以像在桌面版 VS Code 中一样手动保存（例如， File（文件） > Save（保存））。

当处理远程存储库时，您的工作将保存在浏览器的本地存储中，直到您提交它。如果您使用 GitHub Repositories 打开存储库或拉取请求，则可以在“源代码管理”视图中推送您的更改，以持久保存任何新工作。

您还可以通过 Continue Working On（继续工作于） 在其他环境中继续工作。

首次使用 Continue Working On（继续工作于） 且有未提交的更改时，您可以选择使用 Cloud Changes（云更改） 将您的编辑带到您选择的开发环境，它使用 VS Code 服务来存储您的待定更改。有关此内容的更多描述，请参见 GitHub Repositories 文档。

使用远程隧道和自己的计算实例

您可以使用 Remote - Tunnels 扩展在 VS Code Web 版中针对另一台计算机进行开发。

Remote - Tunnels 扩展允许您通过安全隧道连接到远程计算机，例如台式 PC 或虚拟机 (VM)。然后，您可以从任何地方安全地连接到该计算机，而无需 SSH。这使您可以将“您自己的计算资源”带到 vscode.dev，从而启用更多场景，例如在浏览器中运行代码。

您可以在其文档中了解有关 Remote - Tunnels 的更多信息。

安全探索

VS Code Web 版完全在您的 Web 浏览器的沙盒中运行，并提供非常有限的执行环境。

当从远程存储库访问代码时，Web 编辑器不会“克隆”存储库，而是通过直接从您的浏览器调用服务 API 来加载代码；这进一步减少了克隆不受信任的存储库时的攻击面。

当处理本地文件时，VS Code Web 版通过浏览器的文件系统访问 API 加载它们，这限制了浏览器可以访问的范围。

随处运行

与 GitHub Codespaces 类似，VS Code Web 版可以在平板电脑（例如 iPad）上运行。

语言支持

Web 上的语言支持更细致，包括代码编辑、导航和浏览。桌面体验通常由需要文件系统、运行时和计算环境的语言服务和编译器提供支持。在浏览器中，这些体验由浏览器中运行的语言服务提供支持，这些服务提供源代码标记和语法着色、补全以及许多单文件操作。

通常，体验分为以下几类

• 良好： 对于大多数编程语言，VS Code Web 版为您提供代码语法着色、基于文本的补全和括号对着色。通过 Tree-sitter 语法树和 anycode 扩展，我们能够为 C/C++、C#、Java、PHP、Rust 和 Go 等常用语言提供其他体验，例如 Outline/Go to Symbol（大纲/转到符号） 和 Symbol Search（符号搜索）。
• 更好： TypeScript、JavaScript 和 Python 体验均由在浏览器中本地运行的语言服务提供支持。使用这些编程语言，您将获得“良好”的体验，以及丰富的单文件补全、语义突出显示、语法错误等。
• 最佳： 对于许多“Web 式”语言（例如 JSON、HTML、CSS 和 LESS 等），vscode.dev 中的编码体验几乎与桌面版相同（包括 Markdown 预览！）。

您可以通过状态栏中的“语言状态指示器”确定当前文件中语言支持的级别

限制

由于 VS Code Web 版完全在浏览器中运行，因此与您在桌面应用程序中所能做的事情相比，某些体验自然会受到更多限制。例如，终端和调试器不可用，这是有道理的，因为您无法在浏览器沙箱内编译、运行和调试 Rust 或 Go 应用程序。

扩展

只有一部分扩展可以在浏览器中运行。您可以使用“扩展”视图在 Web 中安装扩展，无法安装的扩展将具有警告图标和 Learn Why（了解原因） 链接。我们希望随着时间的推移，启用更多扩展。

当您安装扩展时，它会保存在浏览器的本地存储中。您可以通过启用 Settings Sync（设置同步） 来确保您的扩展在 VS Code 实例（包括不同的浏览器甚至桌面版）之间同步。

当扩展包包含未在浏览器沙箱中运行的扩展时，您将收到一条信息性消息，其中包含查看包中包含的扩展的选项。

当扩展在浏览器沙箱中执行时，它们会受到更多限制。纯声明式扩展，例如大多数主题、代码片段或语法，可以未经修改地运行，并且可以在 VS Code Web 版中使用，而无需扩展作者进行任何修改。需要更新正在运行代码的扩展以支持在浏览器沙箱中运行。您可以在 Web 扩展作者指南中阅读有关支持浏览器中扩展的更多信息。

还有一些扩展仅在浏览器中提供部分支持。一个很好的例子是语言扩展，它将 其支持限制为单个文件或当前打开的文件。

文件系统 API

如今，Edge 和 Chrome 支持 文件系统 API，允许网页访问本地文件系统。如果您的浏览器不支持文件系统 API，则您无法在本地打开文件夹，但可以打开文件。

浏览器支持

您可以在最新版本的 Chrome、Edge、Firefox 和 Safari 中使用 VS Code Web 版。每个浏览器的旧版本可能无法正常工作 - 我们只保证支持最新版本。

提示： 检查兼容浏览器版本的一种方法是查看当前用于测试 VS Code 的 Playwright 的版本，并查看其支持的浏览器版本。您可以在 VS Code 存储库的 package.json 文件中的 devDependencies/@playwright/test 处找到当前使用的 Playwright 版本。一旦您知道 Playwright 版本（例如 1.37），您就可以查看其 发行说明中的 Browser Versions（浏览器版本） 部分。

Webview 在 Firefox 和 Safari 中可能会以不同的方式显示或有一些意外的行为。您可以在 VS Code GitHub 存储库中查看问题查询，以跟踪与特定浏览器相关的问题，例如带有 Safari 标签和 Firefox 标签的问题。

您可以采取其他步骤来改进使用 VS Code Web 版的浏览器体验。查看其他浏览器设置部分以获取更多信息。

移动设备支持

您可以在移动设备上使用 VS Code Web 版，但较小的屏幕可能存在某些限制。

快捷键

某些快捷键在 Web 中也可能以不同的方式工作。

其他浏览器设置

在浏览器中使用 VS Code 时，您可以采取其他浏览器配置步骤。

打开新标签页和窗口

在某些情况下，您可能需要在 Web 版 VS Code 中工作时打开新的标签页或窗口。VS Code 在读取剪贴板内容时可能会请求您允许访问剪贴板。根据您的浏览器，您可以通过不同的方式授予对剪贴板的访问权限，或允许弹出窗口。

• Chrome、Edge、Firefox：在浏览器设置中搜索“站点权限”，或在地址栏右侧查找以下选项

• Safari：在 Safari 浏览器中，转到 偏好设置... > 网站 > 弹出式窗口 > 您正在访问的域名（例如，vscode.dev），然后从下拉菜单中选择 允许。