网页版 Visual Studio Code

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

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

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

以下视频简要介绍了网页版 Visual Studio Code。

与 VS Code 桌面版的关系

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

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

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

打开项目

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

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

GitHub 仓库

您可以直接通过 URL 在网页版 VS Code 中打开一个 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 扩展，在浏览器的搜索栏（即多功能框）中打开 vscode.dev 中的 GitHub 仓库。然后，输入 code 以激活多功能框，接着输入您的仓库名称。建议由您的浏览器搜索历史提供，因此，如果您想要的仓库没有出现，您也可以输入完整的 <owner>/<repo> 名称来打开它，例如 microsoft/vscode。

如果您已经在使用网页版 VS Code (位于 https://vscode.dev），您也可以通过 Remote Repositories 扩展的命令来导航到不同的仓库。选择状态栏左下角的远程指示器，您将看到 Open Remote Repository... 命令。

Azure Repos

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

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

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

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

更多自定义 URL

与桌面版一样，您可以通过一个丰富的扩展生态系统来定制网页版 VS Code，这些扩展几乎支持所有的后端、语言和服务。vscode.dev 包含了一些提供常见体验快捷方式的 URL。

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

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

下面有关于其中一些 URL 的更多信息。

主题

您可以通过网页版 VS Code 使用以下 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 将采用第一个主题。

作为主题作者，您可以将以下徽章添加到您的扩展自述文件中，以便用户可以轻松地在网页版 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 codespace）。为此，请使用命令面板（F1）中的 Continue Working On... 命令，或点击状态栏中的远程指示器。

保存和分享工作

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

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

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

当您首次使用带有未提交更改的 Continue Working On 时，您可以选择使用 Cloud Changes 将您的编辑带到您选择的开发环境中，它使用 VS Code 服务来存储您待处理的更改。这在 GitHub Repositories 文档中有进一步的描述。

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

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

Remote - Tunnels 扩展让您可以通过安全隧道连接到远程机器，如台式电脑或虚拟机 (VM)。然后，您可以从任何地方安全地连接到该机器，而无需 SSH。这让您可以“自带算力”到 vscode.dev，从而支持在浏览器中运行代码等额外场景。

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

安全探索

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

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

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

随处运行

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

语言支持

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

通常，体验分为以下几类

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

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

限制

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

扩展

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

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

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

当扩展在浏览器沙盒中执行时，它们会受到更多限制。纯声明性的扩展，如大多数主题、代码片段或语法定义，可以未经修改地运行，并且无需扩展作者做任何修改即可在网页版 VS Code 中使用。运行代码的扩展需要更新以支持在浏览器沙盒中运行。您可以在网页扩展作者指南中阅读更多关于支持浏览器中扩展所需的内容。

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

文件系统 API

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

浏览器支持

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

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

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

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

移动端支持

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

键盘快捷键

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

附加浏览器设置

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

打开新标签页和窗口

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

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

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