🚀 在 VS Code 中！

vscode.dev(!)

2021 年 10 月 20 日，作者 Chris Dias，@chrisdias

回到 2019 年，当 .dev 顶级域名开放时，我们注册了 vscode.dev 并迅速将其停放，指向我们的网站 code.visualstudio.com（或者，如果你像我一样来自波士顿地区，我们会说“pahked it”）。 就像许多购买 .dev 域名的人一样，我们不知道我们将用它做什么。 而且我们当然没有预料到它最终会成为一项酝酿了十多年的使命的实现。

将 VS Code 带到浏览器

快进到今天。现在，当您访问 https://vscode.dev 时，您将看到一个轻量级的 VS Code 版本，它完全在浏览器中运行。打开本地计算机上的文件夹并开始编码。

无需安装。

vscode.dev running in the browser

随着 vscode.dev 的可用性，我们开始最终实现我们最初的愿景，即构建一个可以在浏览器中完全无服务器运行的开发工具。 要了解完整的历史课程，请查看 Erich Gamma 在 VS Code Day 的演讲 “VS Code 一夜成名……十年磨一剑”。

那么，您可以在 Web 版 VS Code 上做什么？ 实际上有很多…

使用云工具进行本地开发

"The Cat said No" application source code in vscode.dev

支持 File System Access API 的现代浏览器（目前为 Edge 和 Chrome）允许网页访问本地文件系统（在您允许的情况下）。 这个通往本地计算机的简单入口快速开启了一些有趣的应用场景，可以将 Web 版 VS Code 用作零安装的本地开发工具，例如

  • 本地文件查看和编辑。 在 Markdown 中快速记笔记（并预览！）。 即使您在无法安装完整版 VS Code 的受限机器上，您仍然可以使用 vscode.dev 查看和编辑本地文件。
  • 构建客户端 HTML、JavaScript 和 CSS 应用程序，并结合浏览器工具进行调试。
  • 在 Chromebook 等低功耗机器上编辑您的代码，在这些机器上您无法（轻松）安装 VS Code。
  • 在您的 iPad 上开发。 您可以上传/下载文件（甚至可以使用“文件”应用程序将它们存储在云端），以及使用内置的 GitHub Repositories 扩展远程打开仓库。

而且，如果您的浏览器不支持本地文件系统 API，您仍然可以通过浏览器上传和下载文件来打开单个文件。

Local File System Access is Unsupported message dialog

更轻量级的体验

由于 Web 版 VS Code 完全在浏览器中运行，因此与您在桌面应用程序中可以执行的操作相比，某些体验自然会受到更多限制。 例如，终端和调试器不可用，这是有道理的，因为您无法在浏览器沙箱中编译、运行和调试 Rust 或 Go 应用程序（尽管像 Pyodide 和 Web 容器这样的新兴技术有朝一日可能会改变这一点）。

代码编辑、导航和浏览体验更加细致入微，在桌面上，这些体验通常由语言服务和编译器提供支持，这些语言服务和编译器需要文件系统、运行时和计算环境。 在浏览器中，这些体验由完全在浏览器中运行的语言服务（没有文件系统，没有运行时）提供支持，这些语言服务提供源代码标记化和语法着色、完成以及许多单文件操作。

因此，当在浏览器中时，体验通常分为以下几类

良好：对于大多数编程语言，vscode.dev 为您提供代码语法着色、基于文本的完成和 括号对颜色化。 使用 Tree-sitter 语法树，我们能够提供额外的体验，例如 大纲/转到符号 和 符号搜索，适用于 C/C++、C#、Java、PHP、Rust 和 Go 等流行语言。

更好：TypeScript、JavaScript 和 Python 体验均由在浏览器中本机运行的语言服务提供支持。 使用这些编程语言，您将获得“良好”的体验，以及丰富的单文件完成、语义突出显示、语法错误等等。

最佳：对于许多“web”语言，如 JSON、HTML、CSS 和 LESS，vscode.dev 中的编码体验几乎与桌面相同（包括 Markdown 预览！）。

扩展

大多数 UI 自定义扩展（如主题、键映射和代码片段）都可以在 vscode.dev 中工作，您甚至可以通过 设置同步 在浏览器、桌面和 GitHub Codespaces 之间启用漫游。

运行 Node.js 代码并使用特定于操作系统的模块或调用本地可执行文件的扩展程序仍然会显示在搜索结果中，但会明确标记为不可用。

Notification that extension is not available in Visual Studio Code for the Web

尽管如此，越来越多的扩展程序已更新为可在浏览器中使用，而且每天都有更多扩展程序出现。

注意：如果您是扩展作者并且希望您的扩展在浏览器中可用（我们确实希望！），请查看我们的 Web 扩展创作指南。

例如，Luna Paint - Image Editor 扩展程序允许您直接在 VS Code 中编辑栅格图像。 该扩展程序为 VS Code 带来了丰富的设计工具（例如，图层和混合工具），当然您可以将图像保存到本地磁盘。

Luna Paint - Image Editor extension running in vscode.dev

GitHub Issue Notebooks 扩展程序将 Notebook 体验带到 GitHub Issues。 这样，您可以将查询、结果，甚至描述查询目的的 Markdown 交织在一起，放入单个编辑器中。

GitHub Issue Notebooks extension running in vscode.dev

GitHub

许多 VS Code 的扩展程序都适用于存储在 GitHub 中的源代码。 例如，CodeTour 扩展程序允许您创建代码库的引导式演练，而 WikiLens 扩展程序将 VS Code 和您的存储库变成一个强大的笔记工具（具有双向链接）。 为了方便您在 GitHub 中访问您的代码，Web 版 VS Code 内置了 GitHub Repositories、Codespaces 和 Pull Request 扩展程序。 如果您想要更强大的语言体验，或者需要在合并提交之前构建、运行和测试更改，您可以进行快速编辑、查看 PR，然后继续到本地克隆，甚至更好的是，GitHub Codespace。

Continue on dropdown showing Clone Repository Locally or Create New Codespace

哇，听起来很像 github.dev，不是吗？ 它们不同吗？ 相同吗？ 为什么有两个？？！！

好问题！ github.dev 是 Web 版 VS Code 的自定义实例，它与 GitHub 深度集成。 登录是自动的，URL 格式遵循 github.com 的 /organization/repo 模型，因此您只需将 .com 更改为 .dev 即可编辑仓库，并且它已针对 GitHub 进行了自定义，具有浅色和深色主题。

除了 GitHub 上的仓库外，Web 版 VS Code 还支持 Azure Repos（Azure DevOps 的一部分）。 为了同时使用两者，Web 版 VS Code 支持两条路线，vscode.dev/github 和 vscode.dev/azurerepos。 虽然您不必记住这一点，只需在您拥有的任何 URL 前面加上“vscode.dev”即可。

例如，将 https://github.com/microsoft/vscode 更改为“https://vscode.dev/github.com/Microsoft/vscode”。

对于 Azure Repos，执行相同的操作。 将 https://dev.azure.com/… 更改为“https://vscode.dev/dev.azure.com /…”。

今天，对 Azure Repos 的支持处于预览模式，用于读取仓库，但我们正在努力尽快提供完整的读/写功能。

如果您不在 GitHub 或 Azure DevOps 上，则可以通过扩展程序提供对其他仓库托管服务的支持，就像在桌面上一样。 如上所述，这些扩展程序将需要支持完全在浏览器中运行。

说到 URL…

与桌面版一样，您可以通过丰富的扩展生态系统自定义 Web 版 VS Code，这些扩展生态系统几乎支持所有后端、语言和服务。 与桌面版不同，我们很容易通过唯一的 vscode.dev URL（如上面提到的 vscode.dev/github 和 vscode.dev/azurerepos）提供带有预安装扩展的自定义体验。

例如，尝试浏览到 https://vscode.dev/theme/sdras.night-owl。

Night Owl color theme in vscode.dev

在这里，您可以“实时”体验由 @sarah_edo 创作的流行 Night Owl 颜色主题，而无需经历下载和安装过程，只是为了看看您是否喜欢它。 无需安装！ 如果您是主题作者，您甚至可以在 README.md 中创建一个徽章，让用户直接从 Marketplace 试用您的主题（在 Web 版 VS Code 用户指南中了解更多信息）。

随意使用此 URL 与朋友分享您喜欢的主题。 就个人而言，我是 @wesbos 的 Cobalt2 主题的忠实粉丝，请查看 https://vscode.dev/theme/wesbos.theme-cobalt2。 请注意，theme URL 仅适用于完全声明式（无代码）的主题。

如您所见，vscode.dev URL 是我们提供新的、轻量级体验的强大方式。 另一个例子是，Live Share 访客会话也将在浏览器中通过 https://vscode.dev/liveshare URL 提供。 sessionId 将传递给扩展程序，以使加入成为无缝体验。

Live Share dialog with option to join session from the browser

vscode.dev URL 的可能性是无限的，我们有很多想法，我们很高兴在未来几个月内与您分享。

下一步去哪里？

将 VS Code 带到浏览器是实现该产品最初愿景的体现。 这也是一个全新愿景的开始。 任何拥有浏览器和互联网连接的人都可以使用的临时编辑器是未来的基础，在未来，我们真正可以从任何地方编辑任何内容。

敬请期待更多… 😉

编码愉快，

Chris

附言：如果您错过了，您可以观看我们的 Web 版 VS Code 直播。