网页版Visual Studio Code

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

VS Code for the Web 拥有 VS Code Desktop 的许多功能，包括在浏览和编辑时进行搜索和语法高亮，并且有扩展支持来处理您的代码库并进行更简单的编辑。除了可以打开来自 GitHub 和 Azure Repos 等源代码控制提供商的仓库、分支和拉取请求外，您还可以处理存储在本地机器上的代码。

VS Code for the Web 完全在您的网络浏览器中运行，因此与桌面体验相比存在某些限制，您可以阅读更多内容 下面。

以下视频快速介绍了Visual Studio Code for Web。

与 VS Code 桌面版的关系

VS Code for the Web 提供了一个基于浏览器的体验，用于导航文件和仓库并提交轻量级的代码更改。然而，如果您需要访问运行时来运行、构建或调试代码，您希望使用平台功能，例如终端，或者您希望运行在网页中不支持的扩展，我们建议将您的工作转移到桌面应用程序，GitHub Codespaces，或使用Remote - Tunnels以获得 VS Code 的全部功能。此外，VS Code Desktop 让您使用完整的键盘快捷键，而不受浏览器的限制。

当你准备好了进行切换，你将能够“升级”通过几次点击来体验完整的 VS Code。

您可以通过选择齿轮图标在 VS Code Web 的稳定版和内部测试版之间进行切换，然后 切换到内部测试版...，或者直接导航到 https://insiders.vscode.dev.

打开项目

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

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

GitHub 仓库

您可以直接从网址在 VS Code for Web 中打开 GitHub 仓库，遵循以下模式：https://vscode.dev/github/<organization>/<repo>。以VS Code 仓库为例，这将如下所示：https://vscode.dev/github/microsoft/vscode输入：.

此体验由定制提供vscode.dev/github URL，由 GitHub 仓库 扩展提供支持（是更广泛的 远程仓库 扩展的一部分）。

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

注意：该GitHub 仓库扩展在 VS Code 桌面版中也能使用，提供快速的仓库浏览和编辑。一旦你安装了这个扩展，你可以使用GitHub 仓库：打开仓库...命令来打开一个仓库。

你也可以在 中打开 GitHub 仓库vscode.dev通过浏览器的搜索栏（也称为omnibox）安装vscode.dev 扩展 适用于 Chrome 和 Edge。然后，输入 代码要激活omnibox，请输入您的仓库名称。建议由您的浏览器搜索历史填充，因此如果您想要的仓库没有出现，您也可以输入完整的<所有者>/<仓库>名称打开它，例如微软/vscode输入：.

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

Azure 代码库

你可以在 VS Code for Web 中像在 Github 上一样打开 Azure Repos。

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

您可以在 VS Code for Web 中通过前缀打开 Azure Repos 中的任何仓库、分支或标签vscode.dev到Azure Repos网址。

或者，当您在 Azure DevOps 代码库或拉取请求上时，您可以按 (.) 在 VS Code for the Web 中打开它。

更多自定义网址

就像在桌面环境中一样，您可以通过支持几乎所有后端、语言和服务的丰富扩展生态系统来自定义 VS Code for the Web。vscode.dev包括提供常见体验快捷方式的URL。

我们已经探索了一些网址 (vscode.dev/github和vscode.dev/azurerepos)。这里有一个更完整的列表：

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

以下是这些网址的更多信息。

主题

您可以通过 VS Code for the Web 的 URL 模式来分享和体验色彩主题：https://vscode.dev/editor/theme/<extensionId>输入：.

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

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

一个扩展可以定义多个主题。你可以使用模式/编辑器/主题/<扩展ID>/<主题名称>如果没有任何主题名称如果指定了主题，VS Code for the Web 将使用第一个主题。

作为主题作者，您可以在您的扩展说明文件中添加以下徽章，以便用户可以轻松地在 VS Code for Web 中试用您的主题（替换<扩展ID>使用您的主题扩展的独特标识符：

[![在 vscode.dev 预览](https://img.shields.io/badge/preview%20in-vscode.dev-blue)](https://vscode.dev/editor/theme/<extensionId>)

Visual Studio 联机共享

Live Share 客户端会话可以通过浏览器获得 https://vscode.dev/editor/liveshareURL。会话ID将传递给扩展，以使加入成为一个无缝的体验。

继续在不同的环境中工作

在某些情况下，您可能需要访问一个可以运行代码的不同环境。您可以切换到在开发环境中使用支持本地文件系统和完整语言及开发工具的代码库。

GitHub 仓库扩展使您能够轻松地在本地克隆仓库、在桌面重新打开它，或者为当前仓库创建 GitHub codespace（如果您已安装 GitHub Codespaces 扩展并具有创建 GitHub codespaces 的权限）。要执行此操作，请使用从命令面板（F1）中可用的 继续在...上工作 命令，或点击状态栏中的远程指示器。

保存和分享工作

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

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

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

第一次使用继续在上进行开发时有未提交的更改，您可以选择通过Cloud Changes将您的编辑带到您选择的开发环境中，该服务使用VS Code服务来存储您的待处理更改。这在GitHub Repositories文档中进一步描述。

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

您可以在 VS Code for the Web 中使用 Remote - Tunnels 扩展在另一台机器上进行开发。

The Remote - Tunnels 扩展允许您通过安全隧道连接到远程机器，例如台式机或虚拟机 (VM)。然后，您可以从任何地方安全地连接到该机器，而无需使用 SSH。这使您能够将“自己的计算能力”带到 vscode.dev，启用在浏览器中运行代码等附加场景。

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

安全探索

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

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

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

到处都能跑

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

语言支持

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

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

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

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

限制

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

扩展

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

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

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

当扩展在浏览器沙盒中执行时，它们受到的限制更多。纯声明性的扩展，例如大多数主题、片段或语法，可以在不修改的情况下运行，并且在 VS Code for Web 中无需扩展作者进行任何修改即可使用。运行代码的扩展需要更新以支持在浏览器沙盒中运行。您可以在 web extension authors guide 中了解更多关于在浏览器中支持扩展的内容。

也有一些扩展在浏览器中运行，但只部分支持。一个很好的例子是一个语言扩展，其支持范围仅限于单个文件或当前打开的文件。

文件系统 API

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

浏览器支持

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

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

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

为了提升您在 VS Code for the Web 中的浏览器体验，您可以采取一些额外的步骤。请查看 额外的浏览器设置 部分以获取更多信息。

移动支持

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

键盘快捷键

某些键盘快捷键在网页中可能也会有不同的效果。

附加浏览器设置

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

打开新的标签页和Windows

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

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

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