Visual Studio 网页代码
Visual Studio Code for the Web 提供了一个免费、零安装的 Microsoft Visual Studio Code 体验，完全运行在浏览器中，让你能够快速安全地浏览源代码仓库并进行轻量级代码修改。要开始，请在浏览器中进入 https://vscode.dev。
VS Code for the Web 拥有许多你喜欢的 VS Code Desktop 功能，包括浏览和编辑时的搜索和语法高亮功能，以及支持扩展，方便你修改代码库，简化编辑。除了打开仓库、分支和从GitHub和Azure仓库等源码控制服务商获取拉取请求外，你还可以处理存储在本地机器上的代码。
VS Code for the Web 完全运行在你的网页浏览器中，因此与桌面体验相比存在某些限制，详情请见下文。
以下视频简要介绍了 Visual Studio Code for the Web。
与VS Code Desktop 的关系
VS Code for the Web 提供基于浏览器的体验，用于浏览文件和仓库以及提交轻量级代码更改。然而，如果你需要运行、构建或调试代码，想使用终端等平台功能，或者想运行网页不支持的扩展，我们建议将工作迁移到桌面应用、GitHub Codespaces，或者使用远程隧道（Remote - Tunnels）来实现VS Code的全部功能。此外，VS Code Desktop 允许你使用完整的键盘快捷键，不受浏览器限制。
当你准备切换时，只需几次点击就能“升级”到完整的VS Code体验。
你也可以通过选择齿轮图标，然后选择“Insiders 版本”，或直接进入 https://insiders.vscode.dev，在 Stable 和 Insiders 版本之间切换 VS Code for the Web。
开启项目
通过导航到 https://vscode.dev，你可以创建新的本地文件或项目，处理现有的本地项目，或访问托管在其他地方的源代码仓库，如GitHub和Azure仓库（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/githubURL由GitHub Repositories扩展（是更广泛的Remote Repositories扩展的一部分）驱动。
GitHub Repositories 允许你在编辑器内远程浏览和编辑仓库，无需将代码拉入本地机器。你可以在我们的GitHub仓库指南中了解更多关于该扩展及其工作原理的信息。
注意：GitHub Repositories 扩展也支持 VS Code Desktop ，提供快速的仓库浏览和编辑。安装好扩展后，你可以用GitHub仓库打开仓库：Open Repository...命令。
你也可以在vscode.dev通过浏览器的搜索栏（也就是 Omnibox）安装vscode.dev Chrome 和 Edge 的扩展。然后，类型代码激活全能盒，然后输入你仓库的名字。建议会根据你的浏览器搜索历史生成，所以如果你想要的仓库没出现，你也可以输入完全限定的<owner>/<repo>比如说，名字可以打开它微软/VScode.
如果你已经在 https://vscode.dev VS Code for the Web，也可以通过远程仓库扩展命令导航到不同的仓库。选择状态栏左下角的远程指示器，你会看到“打开远程仓库......”命令。
Azure Repos
你可以像在 VS Code for the Web 里打开 Github 仓库一样打开 Azure 仓库。
当你导航到带有schema的URL时https://vscode.dev/azurerepos/<organization>/<project>/<repo>你将能够读取、搜索仓库中的文件，并将你的更改提交到 Azure 仓库。你可以抓取、拉取和同步更改，并查看分支。
你可以在 VS Code for the Web 中打开 Azure 仓库中的任何仓库、分支或标签，方法是vscode.dev迁移到 Azure Repos URL。
或者，当你在 Azure DevOps 仓库或拉取请求中时，你可以按 （.） 在 VS Code for the Web 中打开它。
更多自定义网址
就像桌面一样，你可以通过丰富的扩展生态系统定制 VS Code for the Web，这些扩展几乎支持所有后端、语言和服务。vscode.dev包含提供常见体验快捷键的网址。
我们已经探索了几个网址 （vscode.dev/github以及vscode.dev/azurerepos).这里有更完整的列表：
| 服役经历 | 网址结构 | 文档 |
|---|---|---|
| GitHub | /github/<org>/<repo> |
更多信息见上文 |
| Azure Repos | /azurerepos/<org>/<project>/<repo> |
更多信息见上文 |
| Visual Studio Live Share | /editor/liveshare/<sessionId> |
更多信息如下 |
| Visual Studio 市场 | /editor/marketplace/<marketplacePublisher>/<extensionId>/<extensionVersion> |
编辑此扩展的示例路线 |
| Power Pages | /power/pages/pages |
Power Pages 文档 |
| 简介 | /editor/profile/github/<GUID> |
个人资料文档 |
| 主题 | /editor/theme/<extensionId> |
更多信息如下 |
| MakeCode | /edu/makecode |
MakeCode 文档 |
| VS教育代码 | /edu |
VS Code for Education 登陆页 |
| Azure Machine Learning （AML） | /+ms-toolsai.vscode-ai-remote-web |
AML医生 |
| Azure | /azure |
VS Code for Azure |
请注意，有些网址必须以特定方式输入（例如，vscode.dev/editor/liveshare需要一个活跃的实时共享会话）。请查看各服务的具体访问和使用信息。
下面有关于这些网址的更多信息。
主题
您可以通过 URL 架构通过 VS Code for the Web 分享和体验色彩主题：https://vscode.dev/editor/theme/<extensionId>.
例如，你可以直接进入 https://vscode.dev/editor/theme/sdras.night-owl 体验夜猫子主题，而无需经历下载和安装过程。
注意：颜色主题的URL模式适用于完全声明式（无代码）主题。
扩展可以定义多个主题。你可以用这个模式/editor/theme/<extensionId>/<themeName>.如果没有主题名称被指定为 ，VS Code for the Web 将采用第一个主题。
作为主题作者，你可以在扩展说明中添加以下徽章，方便用户在 VS Code for the Web 中轻松试用你的主题（替换）<extensionId>使用你的主题扩展的唯一标识符）：
[](https://vscode.dev/editor/theme/<extensionId>)
Visual Studio Live Share
实时分享访客会话可通过浏览器访问https://vscode.dev/editor/liveshare网址。该sessionID将传递给扩展，使加入体验更加顺畅。
继续在不同的环境中工作
在某些情况下，你会想访问一个能够运行代码的其他环境。你可以切换到在支持本地文件系统、完整语言和开发工具的开发环境中开发仓库。
GitHub Repositories 扩展让你可以轻松地在本地克隆仓库、在桌面上重新打开，或者为当前仓库创建一个 GitHub 代码空间（前提是你安装了 GitHub Codespaces 扩展并有创建 GitHub 代码空间的权限）。作方法是使用命令面板（F1）中的“继续工作中”命令，或点击状态栏中的远程指示器。
保存与分享作品
在网页中处理本地文件时，如果你启用了自动保存，作品会自动保存。你也可以像在桌面VS Code工作时那样手动保存（比如文件>保存）。
在远程仓库工作时，你的作品会保存在浏览器的本地存储中，直到你提交它。如果你通过GitHub仓库打开仓库或拉取请求，可以在源代码控制视图中推送你的更改，以持久化任何新作品。
你也可以通过“继续工作”在其他环境中继续工作。
当你第一次使用“继续工作”并进行未承诺的更改时，你可以选择通过Cloud Changes把编辑带到你选定的开发环境，Cloud Changes通过VS Code服务存储待处理的更改。GitHub仓库文档中有详细说明。
使用你自己的计算实例和远程隧道
你可以在 VS Code for the Web 中使用 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 提供代码语法着色、基于文本的补全和括号对着色。通过 anycode 扩展的树置语法树，我们能够为流行语言如 C/C++、C#、Java、PHP、Rust 和 Go 提供额外的体验，如 Outline/Go to Symbol 和 Symbol Search。
- 更好：TypeScript、JavaScript 和 Python 的体验都由浏览器中原生运行的语言服务驱动。使用这些编程语言，你将获得“良好”体验，同时还能丰富单文件补全、语义高亮、语法错误等功能。
- 最佳：对于许多“webby”语言，如JSON、HTML、CSS 以及LESS等，vscode.dev 的编码体验几乎与桌面（包括Markdown预览！）完全相同。
您可以通过状态栏中的语言状态指示器确定当前文件中的语言支持水平：
局限性
由于 VS Code for the Web 完全运行在浏览器内，某些体验自然会比桌面应用更受限。例如，终端和调试器都不可用，这很合理，因为你无法在浏览器沙盒中编译、运行和调试 Rust 或 Go 应用。
扩展
只有部分扩展可以在浏览器中运行。你可以使用扩展视图在网页中安装扩展，无法安装的扩展会显示警告图标和“了解原因”链接。我们预计未来会有更多扩展被启用。
安装扩展后，它会保存在浏览器的本地存储中。你可以通过启用设置同步，确保扩展在VS Code实例间同步，包括不同浏览器甚至桌面。
当扩展包包含不在浏览器沙箱运行的扩展时，你会收到一条信息提示，并提供查看包中包含扩展的选项。
当扩展在浏览器沙箱中执行时，它们的限制更为严格。纯声明式扩展，如大多数主题、片段或文法，可以不修改运行，并且在 VS Code for the Web 中无需扩展作者修改即可使用。运行代码的扩展需要更新以支持在浏览器沙盒中运行。你可以在网页扩展作者指南中了解更多支持浏览器扩展的内容。
也有一些扩展只支持部分浏览器。一个很好的例子是限制支持单个文件或当前打开文件的语言扩展。
文件系统 API
如今，Edge 和 Chrome 支持文件系统 API，允许网页访问本地文件系统。如果你的浏览器不支持文件系统API，你无法在本地打开文件夹，但可以打开文件。
浏览器支持
你可以在最新版本的Chrome、Edge、Firefox和Safari中使用VS Code进行网页版。每个浏览器的旧版本可能无法使用——我们仅保证支持最新版本。
提示：检查兼容浏览器版本的一种方法是查看目前用于测试VS Code的Playwright版本，并查看其支持的浏览器版本。你可以在VS Code仓库的package.json文件中找到当前使用的Playwright版本。
devDependencies/@playwright/test.比如说，一旦你了解了剧作家版本1.37然后你可以在他们的发布说明中查看浏览器版本部分。
Web视图在Firefox和Safari中可能会出现不同或出现一些意外的行为。你可以在VS Code GitHub仓库查看问题查询，以追踪与特定浏览器相关的问题，比如带有Safari标签和Firefox标签的问题。
您还可以采取更多步骤来提升 VS Code for the Web 的浏览器体验。请查看“附加浏览器设置”部分了解更多信息。
移动支持
你可以在移动设备上使用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 for the Web 会覆盖此设置，并重定向到命令面板中的“构建”菜单。 |
| Alt+Left 和 Alt+Right 应该在编辑器内导航，但可能会错误触发标签历史导航。 | 如果焦点在编辑器之外，这些快捷方式会触发标签页历史导航。 |
额外的浏览器设置
在浏览器中使用VS Code时，还有额外的浏览器配置步骤。
打开新标签页和窗口
在某些情况下，你可能需要在使用网页版 VS Code 时打开新的标签页或窗口。VS Code 在阅读剪贴板时可能会要求你获得访问权限。根据你的浏览器，你可以通过不同方式允许访问剪贴板或以其他方式设置弹窗：
- Chrome、Edge、Firefox：在浏览器设置中搜索“站点权限”，或在右侧地址栏寻找以下选项：
- Safari：在Safari浏览器中，进入偏好设置......>网站>弹出窗口>你访问的域名（例如，
vscode.dev），然后从下拉菜单中选择允许。