Visual Studio Code Web 版

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

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

VS Code Web 版 完全在您的 Web 浏览器中运行，因此与桌面体验相比，存在一定的限制，您可以在下方阅读更多相关信息。

以下视频快速概述了 Visual Studio Code Web 版。

与 VS Code 桌面版的关系

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

当您准备好切换时，您将能够通过几次点击“升级”到完整的 VS Code 体验。

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

打开项目

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

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

GitHub 仓库

您可以直接从 URL 在 VS Code Web 版 中打开 GitHub 仓库，遵循以下架构：https://vscode.dev/github/<organization>/<repo>。以 VS Code 仓库 为例，这将如下所示：https://vscode.dev/github/microsoft/vscode。

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

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

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

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

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

Azure Repos

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

当您导航到具有架构 https://vscode.dev/azurerepos/<organization>/<project>/<repo> 的 URL 时，您将能够读取、搜索仓库中的文件并将更改提交到 Azure Repos。您可以获取、拉取和同步更改，以及查看分支。

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

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

更多自定义 URL

与桌面版一样，您可以通过丰富的扩展生态系统自定义 VS Code Web 版，这些扩展支持几乎所有后端、语言和服务。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 仓库 扩展使您可以轻松地在本地克隆仓库，在桌面上重新打开它，或为当前仓库创建 GitHub 代码空间（如果您安装了 GitHub Codespaces 扩展并有权创建 GitHub 代码空间）。为此，请使用命令面板（F1）中的 继续在...上工作 命令，或单击状态栏中的远程指示器。

保存和共享工作

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

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

您还可以通过继续在...上工作在其他环境中继续工作。

首次将 继续在...上工作 与未提交的更改一起使用时，您将可以选择使用 云更改 将您的编辑带到您选择的开发环境中，该功能使用 VS Code 服务来存储您的待处理更改。这在 GitHub 仓库 文档中有进一步描述。

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

您可以使用 远程 - 隧道 扩展在 VS Code Web 版 中针对另一台机器进行开发。

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

您可以在其 文档 中了解有关远程 - 隧道的更多信息。

安全探索

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）提供额外的体验，例如大纲/转到符号和符号搜索。
• 更好： TypeScript、JavaScript 和 Python 体验都由在浏览器中原生运行的语言服务提供支持。使用这些编程语言，您将获得“良好”体验，以及丰富的单文件补全、语义高亮、语法错误等等。
• 最佳： 对于许多“Web 相关”语言（例如 JSON、HTML、CSS 和 LESS 等），vscode.dev 中的编码体验几乎与桌面版相同（包括 Markdown 预览！）。

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

限制

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

扩展

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

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

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

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

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

文件系统 API

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

浏览器支持

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

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

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

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

移动设备支持

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

键盘快捷键

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

其他浏览器设置

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

打开新选项卡和窗口

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

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

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