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

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

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

打开项目

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

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

GitHub 仓库

你可以直接从 URL 在网页版 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。

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

Azure Repos

你可以像在网页版 VS Code 中打开 GitHub 仓库一样打开 Azure Repos。

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

你可以在网页版 VS Code 中通过在 Azure Repos URL 前缀 vscode.dev 来打开 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 的更多信息。

主题

你可以通过 URL 架构：https://vscode.dev/editor/theme/<extensionId> 在网页版 VS Code 中共享和体验颜色主题。

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

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

一个扩展可以定义多个主题。你可以使用架构 /editor/theme/<extensionId>/<themeName>。如果未指定 themeName，网页版 VS Code 将采用第一个主题。

作为主题作者，你可以将以下徽章添加到你的扩展 README 中，以便用户轻松地在网页版 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) 中提供的 继续工作... 命令，或单击状态栏中的远程指示器。

保存和共享工作

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

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

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

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

通过远程 - 隧道使用自己的计算实例

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

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

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

安全探索

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

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

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

随处运行

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

语言支持

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

通常，体验分为以下几类

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

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

限制

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

扩展

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

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

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

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

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

文件系统 API

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

浏览器支持

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

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

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

你可以在使用浏览器版 VS Code 时采取其他浏览器配置步骤来改善你的浏览器体验。有关更多信息，请查看附加浏览器设置部分。

移动支持

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

键盘快捷方式

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

附加浏览器设置

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

打开新标签页和窗口

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

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

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