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 完全在您的网页浏览器中运行，因此与桌面体验相比存在某些限制，您可以在下方阅读更多相关信息。

以下视频快速概述了用于Web的Visual Studio Code。

与VS Code桌面版的关系

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

当你准备好切换时，你将能够通过几次点击"升级"到完整的VS Code体验。

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

打开项目

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

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

GitHub 仓库

你可以直接从URL在VS Code for the Web中打开一个GitHub仓库，遵循以下格式：https://vscode.dev/github//。以VS Code仓库为例，这将看起来像：https://vscode.dev/github/microsoft/vscode。

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

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

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

你也可以通过安装Chrome和Edge的vscode.dev 扩展，在浏览器的搜索栏（也称为omnibox）中打开GitHub仓库。然后，输入code以激活omnibox，接着输入你的仓库名称。建议会根据你的浏览器搜索历史填充，所以如果你想要的仓库没有出现，你也可以输入完整的/名称来打开它，例如microsoft/vscode。

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

Azure 仓库

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

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

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

或者，当你在Azure DevOps仓库或拉取请求上时，你可以按下(.)在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方案在VS Code for the Web上分享和体验颜色主题：https://vscode.dev/editor/theme/。

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

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

一个扩展可以定义多个主题。你可以使用模式 /editor/theme//。如果没有指定 themeName，VS Code for the Web 将采用第一个主题。

作为主题作者，您可以在扩展的readme中添加以下徽章，以便用户轻松在VS Code for the Web中试用您的主题（将替换为您主题扩展的唯一标识符）：

[![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 仓库扩展使您可以轻松地在本地克隆仓库，在桌面上重新打开它，或为当前仓库创建 GitHub 代码空间（如果您已安装 GitHub Codespaces 扩展并有权创建 GitHub 代码空间）。为此，请使用命令面板（F1）中的 继续处理... 命令，或点击状态栏中的远程指示器。

保存和分享工作

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

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

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

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

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

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

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

您可以了解更多关于远程隧道的信息，请参阅其文档。

安全探索

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

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

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

随处运行

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

语言支持

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

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

• 优点： 对于大多数编程语言，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 the Web中可用，无需扩展作者进行任何修改。运行代码的扩展需要更新以支持在浏览器沙箱中运行。您可以在web扩展作者指南中阅读更多关于支持浏览器中扩展的内容。

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

文件系统 API

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

浏览器支持

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

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

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

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

移动支持

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

快捷键

某些快捷键在网页上可能也会有不同的工作方式。

额外的浏览器设置

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

打开新标签页和窗口

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

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

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