Web 版 Visual Studio Code

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

Web 版 VS Code 拥有您喜爱的 VS Code 桌面版中的许多功能，包括在浏览和编辑时进行搜索和语法高亮显示，以及扩展支持，以便您可以在代码库上工作并进行更简单的编辑。除了打开来自 GitHub 和 Azure Repos（Azure DevOps 的一部分）等源代码控制提供商的仓库、分叉和拉取请求外，您还可以使用存储在本地计算机上的代码。

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

与 VS Code 桌面版的关系

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

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

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

打开项目

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

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

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 仓库：打开仓库...**命令打开仓库。

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

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

Azure Repos

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

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

您可以通过在 Azure DevOps 仓库或拉取请求的 URL 前添加 vscode.dev 前缀，在 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 的更多信息。

主题

您可以通过以下 URL 方案，在 Web 版 VS Code 中共享和体验颜色主题：https://vscode.dev/editor/theme/<extensionId>。

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

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

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

作为主题作者，您可以将以下徽章添加到您的扩展自述文件中，以允许用户轻松地在 Web 版 VS Code 中试用您的主题（将 <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 代码空间 扩展程序并有权创建 GitHub 代码空间）。为此，请使用命令面板（F1）中的 **继续操作…** 命令，或单击状态栏中的远程指示器。

保存和共享工作

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

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

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

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

使用自己的计算资源运行 Remote - Tunnels

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

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

您可以在 文档 中详细了解远程 - 隧道。

安全探索

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

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

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

在任何地方运行

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

语言支持

Web 版语言支持更加细致，包括代码编辑、导航和浏览。桌面体验通常由语言服务和编译器驱动，这些服务和编译器期望文件系统、运行时和计算环境。在浏览器中，这些体验由在浏览器中运行的语言服务驱动，这些服务提供源代码标记化和语法着色、完成和许多单文件操作。

通常，体验分为以下类别

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

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

限制

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

扩展

只有一部分扩展可以在浏览器中运行。您可以使用扩展视图在 web 中安装扩展，而无法安装的扩展将显示警告图标和 **了解原因** 链接。我们预计随着时间的推移，将有更多扩展支持浏览器运行。

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

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

当扩展程序在浏览器沙箱中执行时，它们的限制更多。纯粹声明性的扩展程序（例如大多数主题、代码段或语法）可以无修改运行，并且无需扩展作者进行任何修改即可在 Web 版 VS Code 中使用。运行代码的扩展程序需要更新以支持在浏览器沙箱中运行。您可以在 web 扩展作者指南 中详细了解支持浏览器中的扩展程序所涉及的内容。

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

文件系统 API

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

浏览器支持

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

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

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

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

移动支持

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

按键绑定

某些按键绑定在 web 中的工作方式也可能有所不同。

其他浏览器设置

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

打开新标签页和窗口

在某些情况下，您可能需要在网页版 VS Code 中打开一个新标签页或窗口。VS Code 可能会要求您允许访问剪贴板，以便从中读取内容。根据您的浏览器，您可以授予剪贴板访问权限，或者以其他方式允许弹出窗口。

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

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