适用于 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，或者使用Remote - Tunnels 来获得 VS Code 的全部功能。此外，VS Code 桌面版允许你使用不受浏览器限制的全套键盘快捷方式。

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

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

打开项目

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

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

GitHub 仓库

你可以直接通过 URL 在适用于 Web 的 VS Code 中打开 GitHub 仓库，遵循以下格式：https://vscode.dev/github/<organization>/<repo>。以 VS Code 仓库为例，它将如下所示：https://vscode.dev/github/microsoft/vscode。

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

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

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

通过为 Chrome 和 Edge 安装 vscode.dev 扩展，你还可以通过浏览器的搜索栏（也称为 omnibox）在 vscode.dev 中打开 GitHub 仓库。然后，键入 code 以激活 omnibox，后跟你的仓库名称。建议列表会根据你的浏览器搜索历史记录填充，因此如果你想要的仓库没有出现，你也可以输入完全限定的 <owner>/<repo> 名称来打开它，例如 microsoft/vscode。

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

Azure Repos

你可以在适用于 Web 的 VS Code 中像打开 GitHub 仓库一样打开 Azure Repos。

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

通过在 Azure Repos 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 格式：https://vscode.dev/editor/theme/<extensionId> 在适用于 Web 的 VS Code 中分享和体验颜色主题。

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

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

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

作为主题作者，你可以将以下徽章添加到你的扩展 readme 中，以便用户在适用于 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 Repositories 扩展使你可以轻松地在本地克隆仓库，在桌面版中重新打开，或为当前仓库创建 GitHub codespace（如果你已安装 GitHub Codespaces 扩展并具有创建 GitHub codespaces 的权限）。为此，请使用命令面板（F1）中的继续工作... 命令或单击状态栏中的远程指示器。

保存和共享工作

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

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

你也可以通过继续工作在其他环境中继续工作。

首次使用带有未提交更改的继续工作时，可以选择使用云更改将你的编辑带到所选开发环境，云更改使用 VS Code 服务存储你的待处理更改。这在 GitHub Repositories 文档中有进一步描述。

使用 Remote - Tunnels 使用自己的计算实例

你可以使用 Remote - Tunnels 扩展在适用于 Web 的 VS Code 中针对另一台机器进行开发。

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

你可以在 Remote - Tunnels 文档 中了解更多信息。

安全探索

适用于 Web 的 VS Code 完全在你的 Web 浏览器的沙盒中运行，提供的执行环境非常有限。

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

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

随处运行

与 GitHub Codespaces 类似，适用于 Web 的 VS Code 可以在平板电脑上运行，例如 iPad。

语言支持

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

通常，体验分为以下几类：

• 良好： 对于大多数编程语言，适用于 Web 的 VS Code 提供代码语法着色、基于文本的补全和括号对着色。通过 anycode 扩展使用 Tree-sitter 语法树，我们能够为 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 目前支持 File System API，允许网页访问本地文件系统。如果你的浏览器不支持 File System API，则无法在本地打开文件夹，但可以打开文件。

浏览器支持

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

提示： 检查兼容浏览器版本的一种方法是查看目前用于测试 VS Code 的 Playwright 版本，并查阅其支持的浏览器版本。你可以在 VS Code 仓库的 package.json 文件中找到当前使用的 Playwright 版本，路径为 devDependencies/@playwright/test。知道 Playwright 版本（例如 1.37）后，即可在其版本说明中查阅浏览器版本部分。

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

在浏览器中使用 VS Code 时，可以采取其他浏览器配置步骤。请查阅其他浏览器设置部分以获取更多信息。

移动设备支持

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

键盘快捷方式

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

其他浏览器设置

在浏览器中使用 VS Code 时，你可以采取额外的浏览器配置步骤。

打开新标签页和窗口

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

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

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