Visual Studio Code for the Web（网页版 Visual Studio Code）
Visual Studio Code for the Web 提供了一个免费的、零安装的 Microsoft Visual Studio Code 体验，完全在您的浏览器中运行，使您可以快速、安全地浏览源代码仓库并进行轻量级的代码修改。要开始使用，请在浏览器中访问 https://vscode.dev。
VS Code for the Web 拥有您喜爱的许多 VS Code 桌面版功能，包括浏览和编辑时的搜索与语法高亮，以及支持扩展程序以便您处理代码库并进行简单的编辑。除了从 GitHub 和 Azure Repos 等源代码管理提供商处打开仓库、复刻 (fork) 和拉取请求 (pull request) 外，您还可以处理存储在本地机器上的代码。
VS Code for the Web 完全在您的网络浏览器中运行，因此与桌面版体验相比存在一定的局限性，您可以在下方了解更多信息。
以下视频简要介绍了 Visual Studio Code for the Web。
与 VS Code 桌面版的关系
VS Code for the Web 提供了一种基于浏览器的体验，用于导航文件和仓库以及提交轻量级代码更改。但是，如果您需要访问运行时来运行、构建或调试代码，想要使用终端等平台功能，或者想要运行在网页版中不受支持的扩展程序，我们建议您将工作转移到桌面应用程序、GitHub Codespaces，或使用 Remote - Tunnels 以获得 VS Code 的全部功能。此外，VS Code 桌面版允许您使用不受浏览器限制的全套键盘快捷键。
当您准备好切换时，只需点击几下即可“升级”到完整的 VS Code 体验，详见 “在不同环境中继续工作”。
您还可以通过选择齿轮图标，然后选择“切换到 Insiders 版本...”，或者直接导航到 https://insiders.vscode.dev，在 VS Code for the Web 的稳定版 (Stable) 和预览版 (Insiders) 之间切换。
打开项目
通过导航到 https://vscode.dev，您可以创建新的本地文件或项目，处理现有的本地项目，或者访问托管在其他地方（例如 GitHub 和 Azure Repos，即 Azure DevOps 的一部分）的源代码仓库。
您可以像在 VS Code 桌面环境中一样在网页中创建新的本地文件，方法是使用命令面板 (F1) 中的“文件” > “新建文件”。
GitHub 仓库
您可以按照以下方案直接通过 URL 在 VS Code for the Web 中打开 GitHub 仓库：https://vscode.dev/github/<organization>/<repo>。以 VS Code 仓库为例，其 URL 为：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 扩展程序，直接通过浏览器的搜索栏（又称多功能框/omnibox）在 vscode.dev 中打开 GitHub 仓库。然后，输入 code 以激活多功能框，接着输入仓库名称。建议由您的浏览器搜索历史填充，因此如果未出现您想要的仓库，您也可以输入完全限定的 <owner>/<repo> 名称来打开它，例如 microsoft/vscode。
如果您已经处于 https://vscode.dev 的 VS Code for the Web 中，也可以通过 Remote Repositories 扩展命令导航到不同的仓库。选择状态栏左下角的远程指示器，您将看到“打开远程仓库...”命令。
Azure Repos
您可以在 VS Code for the Web 中像打开 GitHub 仓库一样打开 Azure Repos。
当您导航到架构为 https://vscode.dev/azurerepos/<organization>/<project>/<repo> 的 URL 时，您将能够读取和搜索仓库中的文件，并将更改提交到 Azure Repos。您可以获取、拉取、同步更改并查看分支。
通过在 Azure Repos URL 前加上 vscode.dev，您可以在 VS Code for the Web 中打开 Azure Repos 中的任何仓库、分支或标签。
或者，当您位于 Azure DevOps 仓库或拉取请求页面时，可以按 (.) 在 VS Code for the Web 中将其打开。
更多自定义 URL
与桌面版一样，您可以通过丰富的扩展生态系统自定义 VS Code for the Web，这些扩展支持几乎所有的后端、语言和服务。vscode.dev 包含了一些提供常用体验快捷方式的 URL。
我们已经探索了几个 URL（vscode.dev/github 和 vscode.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 for Education | /edu |
VS Code for Education 落地页 |
| Azure Machine Learning (AML) | /+ms-toolsai.vscode-ai-remote-web |
AML 文档 |
| Azure | /azure |
VS Code for Azure |
请注意，某些 URL 必须以特定方式输入（例如，vscode.dev/editor/liveshare 需要一个活动的 Live Share 会话）。请查看每项服务的文档以获取特定的访问和使用信息。
下方提供了关于其中一些 URL 的更多信息。
主题
您可以通过 URL 架构 https://vscode.dev/editor/theme/<extensionId> 在 VS Code for the Web 中共享和体验颜色主题。
例如，您可以访问 https://vscode.dev/editor/theme/sdras.night-owl 来体验 Night Owl 主题，无需经过下载和安装过程。
注意：颜色主题 URL 架构适用于完全声明式（无代码）的主题。
一个扩展程序可以定义多个主题。您可以使用架构 /editor/theme/<extensionId>/<themeName>。如果未指定 themeName，VS Code for the Web 将使用第一个主题。
作为主题作者，您可以将以下徽章添加到您的扩展自述文件中，以便用户可以轻松地在 VS Code for the Web 中试用您的主题（将 <extensionId> 替换为您主题扩展程序的唯一标识符）：
[](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 扩展并拥有创建权限）。为此，请使用命令面板 (F1) 中提供的“继续工作于...”命令，或点击状态栏中的远程指示器。
保存和共享工作
在网页上处理本地文件时，如果您启用了自动保存，您的工作将自动保存。您也可以像在桌面版 VS Code 中一样手动保存（例如“文件” > “保存”）。
处理远程仓库时，您的工作会保存在浏览器的本地存储中，直到您提交它。如果您使用 GitHub Repositories 打开仓库或拉取请求，可以在源代码管理视图中推送更改，以保存任何新的工作。
您还可以通过“继续工作于”在其他环境中继续工作。
第一次在有未提交更改的情况下使用“继续工作于”时，您可以选择使用“云端更改”将您的编辑带到所选的开发环境，该功能使用 VS Code 服务来存储您待处理的更改。这在 GitHub Repositories 文档中有更详细的描述。
通过远程隧道 (Remote Tunnels) 使用您自己的计算实例
您可以使用 Remote - Tunnels 扩展在 VS Code for the Web 中针对另一台机器进行开发。
Remote - Tunnels 扩展允许您通过安全隧道连接到远程机器，例如台式 PC 或虚拟机 (VM)。然后，您可以从任何地方安全地连接到该机器，而无需 SSH。这让您可以将“自带计算资源”引入 vscode.dev，从而支持在浏览器中运行代码等额外场景。
您可以在其文档中了解有关 Remote - Tunnels 的更多信息。
安全探索
VS Code for the Web 完全在您的 Web 浏览器沙盒中运行，提供了一个非常有限的执行环境。
在访问远程仓库中的代码时，Web 编辑器不会“克隆”仓库，而是通过直接从浏览器调用服务的 API 来加载代码；这进一步减少了克隆不受信任仓库时的攻击面。
在处理本地文件时，VS Code for the Web 通过浏览器的文件系统访问 API 加载它们，该 API 限制了浏览器可以访问的范围。
随处运行
与 GitHub Codespaces 类似，VS Code for the Web 可以在 iPad 等平板电脑上运行。
语言支持
语言支持在 Web 上更为细微，包括代码编辑、导航和浏览。桌面版体验通常由依赖文件系统、运行时和计算环境的语言服务和编译器驱动。在浏览器中，这些体验由运行在浏览器中的语言服务驱动，它们提供源代码分词和语法着色、补全以及许多单文件操作。
通常，体验分为以下几类：
- 良好： 对于大多数编程语言，VS Code for the Web 提供代码语法着色、基于文本的补全以及括号对着色。通过使用 Tree-sitter 语法树和 anycode 扩展，我们能够为 C/C++、C#、Java、PHP、Rust 和 Go 等流行语言提供额外的体验，例如“大纲/转到符号”和“符号搜索”。
- 更好： TypeScript、JavaScript 和 Python 体验均由原生运行在浏览器中的语言服务驱动。对于这些编程语言，您将获得“良好”体验，并加上丰富的单文件补全、语义高亮、语法错误提示等。
- 最佳： 对于 JSON、HTML、CSS 和 LESS 等许多“Web 类”语言，vscode.dev 中的编码体验几乎与桌面版完全相同（包括 Markdown 预览！）。
您可以通过状态栏中的语言状态指示器确定当前文件中的语言支持级别。
限制
由于 VS Code for the Web 完全在浏览器中运行，与桌面应用相比，某些体验自然会受到更多限制。例如，终端和调试器不可用，这很合理，因为您无法在浏览器沙盒中编译、运行和调试 Rust 或 Go 应用程序。
扩展
只有部分扩展程序可以在浏览器中运行。您可以使用“扩展”视图在 Web 中安装扩展，无法安装的扩展将显示警告图标和“了解原因”链接。我们预计未来会有更多的扩展程序被启用。
当您安装扩展时，它会保存在浏览器的本地存储中。您可以通过启用设置同步，确保您的扩展在不同 VS Code 实例（包括不同浏览器甚至桌面版）之间保持同步。
当扩展包包含无法在浏览器沙盒中运行的扩展时，您会收到一条信息提示，并可选择查看包中包含的扩展。
当扩展程序在浏览器沙盒中执行时，它们会受到更多限制。纯声明式的扩展（如大多数主题、代码片段或语法文件）可以未经修改地运行，并在 VS Code for the Web 中使用，无需扩展作者进行任何修改。运行代码的扩展需要进行更新以支持在浏览器沙盒中运行。您可以在网页扩展作者指南中阅读更多关于支持浏览器扩展的内容。
还有一些扩展程序仅在浏览器中提供部分支持。一个很好的例子是将其支持限制为单个文件或当前打开文件的语言扩展。
文件系统 API
Edge 和 Chrome 目前支持 文件系统 API，允许网页访问本地文件系统。如果您的浏览器不支持文件系统 API，则无法在本地打开文件夹，但可以打开单个文件。
浏览器支持
您可以在最新版本的 Chrome、Edge、Firefox 和 Safari 中使用 VS Code for the Web。每个浏览器的旧版本可能无法工作——我们仅保证对最新版本的支持。
提示： 查看兼容浏览器版本的一种方法是查看当前用于测试 VS Code 的 Playwright 版本，并查看其支持的浏览器版本。您可以在 VS Code 仓库的 package.json 文件中的
devDependencies/@playwright/test下找到当前使用的 Playwright 版本。了解 Playwright 版本（例如1.37）后，您可以查看其发行说明中的“浏览器版本”部分。
Webview 在 Firefox 和 Safari 中可能显示不同或具有一些意外行为。您可以查看 VS Code GitHub 仓库中的问题查询，以跟踪与特定浏览器相关的问题，例如使用 Safari 标签和 Firefox 标签。
您可以采取额外步骤来改善使用 VS Code for the Web 时的浏览器体验。请查看 其他浏览器设置 部分以获取更多信息。
移动设备支持
您可以在移动设备上使用 VS Code for the Web，但较小的屏幕可能会有一些限制。
键盘快捷键
某些键盘快捷键在 Web 上也可能有不同的表现。
| 问题 | 原因 |
|---|---|
| ⇧⌘P (Windows, Linux Ctrl+Shift+P) 不会在 Firefox 中启动命令面板。 | ⇧⌘P (Windows, Linux Ctrl+Shift+P) 在 Firefox 中被保留占用。 作为解决方法，请使用 F1 启动命令面板。 |
| ⌘N (Windows, Linux Ctrl+N) 用于新建文件的快捷键在 Web 上不起作用。 | ⌘N (Windows, Linux Ctrl+N) 会改为打开一个新窗口。 作为解决方法，您可以使用 Ctrl+Alt+N (macOS 上为 Cmd+Alt+N)。 |
| ⌘W (Windows Ctrl+F4, Linux Ctrl+W) 用于关闭编辑器的快捷键在 Web 上不起作用。 | ⌘W (Windows Ctrl+F4, Linux Ctrl+W) 会在浏览器中关闭当前标签页。 作为解决方法，您可以使用 Ctrl+Shift+Alt+N (macOS 上为 Cmd+Shift+Alt+N)。 |
| ⇧⌘B (Windows, Linux Ctrl+Shift+B) 不会在浏览器中切换收藏夹栏。 | VS Code for the Web 会覆盖此快捷键并将其重定向到命令面板中的“构建”菜单。 |
| Alt+Left 和 Alt+Right 应当在编辑器内导航，但可能会错误地触发标签页历史记录导航。 | 如果焦点在编辑器外部，这些快捷键会改为触发标签页历史记录导航。 |
其他浏览器设置
在浏览器中使用 VS Code 时，您可以采取额外的浏览器配置步骤。
打开新标签页和窗口
在某些情况下，当您在 VS Code for the Web 中工作时，可能需要打开新标签页或窗口。VS Code 可能会在读取剪贴板时请求您授予访问权限。根据您的浏览器，您可以通过不同方式授予剪贴板访问权限或允许弹出窗口：
- Chrome、Edge、Firefox：在浏览器设置中搜索“站点权限”，或在地址栏右侧查找以下选项：
- Safari：在 Safari 浏览器中，转到“偏好设置...” > “网站” > “弹出式窗口” > 您正在访问的域名（例如
vscode.dev），然后从下拉菜单中选择“允许”。