Visual Studio Code for the Web

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

VS Code for the Web 拥有您所喜爱的 VS Code 桌面版的许多功能，包括浏览和编辑时的搜索与语法高亮，以及支持处理代码库和进行简单编辑的插件扩展。除了从 GitHub 和 Azure Repos 等源代码控制提供商处打开仓库、分支 (fork) 和拉取请求 (pull request) 外，您还可以处理存储在本地机器上的代码。

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

以下视频简要介绍了 Visual Studio Code for the Web。

与 VS Code 桌面版的关系

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

准备好切换时，您只需点击几下即可“升级”到完整的 VS Code 体验，详见“在不同环境中继续工作”。

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

打开项目

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

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

GitHub 仓库

您可以直接从 URL 在 VS Code for the Web 中打开 GitHub 仓库，遵循以下模式：https://vscode.dev/github/<organization>/<repo>。以 VS Code 仓库为例，其 URL 为：https://vscode.dev/github/microsoft/vscode。

这种体验通过自定义的 vscode.dev/github URL 提供，该功能由 GitHub Repositories 插件（作为更广泛的 Remote Repositories 插件的一部分）驱动。

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

注意：GitHub Repositories 插件在 VS Code 桌面版中同样有效，可提供快速的仓库浏览和编辑功能。安装插件后，您可以使用 GitHub Repositories: Open Repository... 命令打开仓库。

您还可以通过安装适用于 Chrome 和 Edge 的 vscode.dev 插件，通过浏览器的搜索栏（即 omnibox）在 vscode.dev 中打开 GitHub 仓库。然后，输入 code 来激活 omnibox，接着输入仓库名称。建议列表将根据您的浏览器搜索历史填充，因此如果未找到您想要的仓库，您也可以输入完整的 <owner>/<repo> 名称来打开，例如 microsoft/vscode。

如果您已经处于 https://vscode.dev 的 VS Code for the Web 中，也可以通过 Remote Repositories 插件命令导航到其他仓库。选择状态栏左下角的远程指示器，您将看到 Open Remote Repository... 命令。

Azure Repos

您可以在 VS Code for the Web 中像打开 GitHub 仓库一样打开 Azure Repos。

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

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

或者，当您在 Azure DevOps 仓库或拉取请求页面时，您可以按（.）键在 VS Code for the Web 中打开它。

更多自定义 URL

与桌面版一样，您可以通过丰富的插件生态系统来自定义 VS Code for the Web，这些插件支持几乎所有的后端、语言和服务。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> 在 VS Code for the Web 中共享和体验颜色主题。

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

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

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

作为主题作者，您可以将以下徽章添加到您的插件自述文件中，以便用户可以轻松地在 VS Code for the 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 Codespace（如果您安装了 GitHub Codespaces 插件并拥有创建 GitHub Codespaces 的权限）。要执行此操作，请使用命令面板（F1）中提供的 Continue Working On... 命令，或点击状态栏中的远程指示器。

保存并共享工作

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

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

您还可以通过“在不同环境中继续工作”在其他环境中继续工作。

第一次在有未提交更改的情况下使用 Continue Working On 时，您可以选择使用 Cloud Changes 将您的编辑内容带入所选的开发环境，该功能使用 VS Code 服务来存储您的挂起更改。这在 GitHub Repositories 文档中有详细描述。

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

您可以使用 Remote - Tunnels 插件在 VS Code for the Web 中针对其他机器进行开发。

Remote - Tunnels 插件允许您通过安全隧道连接到远程机器，如桌面 PC 或虚拟机 (VM)。然后，您可以从任何地方安全地连接到该机器，而无需 SSH。这让您可以将“自带计算资源”引入 vscode.dev，从而支持在浏览器中运行代码等额外场景。

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

安全探索

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

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

使用本地文件时，VS Code for the Web 通过浏览器的文件系统访问 API 加载它们，该 API 限制了浏览器可以访问的范围。

随处运行

与 GitHub Codespaces 类似，VS Code for the Web 可以在 iPad 等平板电脑上运行。

语言支持

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

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

• 良好 (Good)：对于大多数编程语言，VS Code for the Web 为您提供代码语法着色、基于文本的补全以及括号对着色。通过 anycode 插件使用 Tree-sitter 语法树，我们能够为 C/C++、C#、Java、PHP、Rust 和 Go 等流行语言提供额外的体验，例如 大纲/转到符号 和 符号搜索。
• 更好 (Better)：TypeScript、JavaScript 和 Python 体验均由在浏览器中原生运行的语言服务提供支持。使用这些编程语言，您将获得“良好”体验，外加丰富的单文件补全、语义高亮、语法错误提示等功能。
• 最佳 (Best)：对于许多“Web 类”语言，如 JSON、HTML、CSS 和 LESS 等，vscode.dev 中的编码体验几乎与桌面版完全相同（包括 Markdown 预览！）。

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

限制

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

扩展

只有一部分插件可以在浏览器中运行。您可以使用“扩展”视图在 Web 中安装插件；无法安装的插件将带有警告图标和 了解原因 链接。我们预计未来会有更多的插件获得支持。

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

当插件包中包含无法在浏览器沙箱中运行的插件时，您会收到一条信息提示，并可选择查看该包中包含的插件。

当插件在浏览器沙箱中执行时，会受到更多限制。纯声明式的插件（如大多数主题、代码片段或语法文件）无需修改即可运行，并且无需插件作者进行任何修改即可在 VS Code for the Web 中使用。运行代码的插件需要更新以支持在浏览器沙箱中运行。您可以在 Web 插件作者指南中阅读有关支持浏览器插件所需涉及内容的更多信息。

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

文件系统 API

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

浏览器支持

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

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

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

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

移动端支持

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

键盘快捷键

某些键盘快捷键在 Web 上的工作方式也可能有所不同。

其他浏览器设置

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

打开新标签页和窗口

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

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

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