尝试以扩展 VS Code 中的代理模式!

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,或使用 Remote - Tunnels 以获得 VS Code 的全部功能。此外,VS Code 桌面版允许您使用一套完整的键盘快捷键,不受浏览器限制。

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

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

打开项目

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

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

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: Open Repository... 命令打开一个仓库。

您还可以通过安装适用于 Chrome 和 Edge 浏览器的 vscode.dev 扩展,通过浏览器的搜索栏(即地址栏)在 vscode.dev 中打开 GitHub 仓库。然后,键入 code 激活地址栏,后跟您的仓库名称。建议会根据您的浏览器搜索历史记录填充,因此如果您想要的仓库没有出现,您也可以键入完整的 <owner>/<repo> 名称来打开它,例如 microsoft/vscode

Type  in your browser and search a GitHub repository to open in vscode.dev

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

GitHub Repositories

Azure Repos

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

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

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

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

更多自定义 URL

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

我们已经探讨了几个 URL (vscode.dev/githubvscode.dev/azurerepos)。以下是更完整的列表

服务 URL 结构 文档
GitHub /github/<org>/<repo> 更多信息见上文
Azure Repos /azurerepos/<org>/<project>/<repo> 更多信息见上文
Visual Studio Live Share /editor/liveshare/<sessionId> 更多信息见下文
Visual Studio Marketplace /editor/marketplace/<marketplacePublisher>
/<extensionId>/<extensionVersion>
编辑此扩展示例路由
Power Pages /power/pages Power Pages 文档
配置文件 /editor/profile/github/<GUID> 配置文件文档
主题 /editor/theme/<extensionId> 更多信息见下文
MakeCode /edu/makecode MakeCode 文档
VS Code 教育版 /edu VS Code 教育版登陆页面
Azure 机器学习 (AML) /+ms-toolsai.vscode-ai-remote-web AML 文档

请注意,某些 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 扩展连接您自己的计算实例

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

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

Language status indicator

限制

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

扩展

只有一部分扩展可以在浏览器中运行。您可以使用扩展视图在网页中安装扩展,无法安装的扩展将显示警告图标和了解原因链接。我们预计未来会有更多扩展被启用。

Limited extension support

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

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

Python extension pack limit

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

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

文件系统 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 网页版,但小屏幕可能会有某些限制。

键盘快捷键

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

问题 原因
⇧⌘P (Windows, Linux Ctrl+Shift+P) 无法在 Firefox 中启动命令面板。 ⇧⌘P (Windows, Linux Ctrl+Shift+P) 在 Firefox 中已被保留。
作为一种解决方法,请使用 F1 启动命令面板。
用于新建文件的 ⌘N (Windows, Linux Ctrl+N) 在网页版中不起作用。 ⌘N (Windows, Linux Ctrl+N) 会改为打开一个新窗口。
作为一种解决方法,您可以使用 Ctrl+Alt+N(在 macOS 上为 Cmd+Alt+N)。
用于关闭编辑器的 ⌘W (Windows Ctrl+F4, Linux Ctrl+W) 在网页版中不起作用。 ⌘W (Windows Ctrl+F4, Linux Ctrl+W) 会关闭浏览器中的当前标签页。
作为一种解决方法,您可以使用 Ctrl+Shift+Alt+N(在 macOS 上为 Cmd+Shift+Alt+N)。
⇧⌘B (Windows, Linux Ctrl+Shift+B) 不会在浏览器中切换收藏夹栏。 VS Code 网页版会覆盖此功能并重定向到命令面板中的“构建”菜单。
Alt+左箭头Alt+右箭头 应在编辑器内导航,但可能会错误地触发标签页历史导航。 如果焦点在编辑器之外,这些快捷键会改为触发标签页历史导航。

浏览器额外设置

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

打开新标签页和窗口

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

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

Allow clipboard access in the browser

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