vscode.dev(!)

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

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

将 VS Code 带到浏览器

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

无需安装。

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

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

使用云工具进行本地开发

支持 文件系统访问 API（目前为 Edge 和 Chrome）的现代浏览器允许网页访问本地文件系统（经你允许）。 这个通往本地机器的简单通道很快为使用 Web 版 VS Code 作为零安装的本地开发工具开辟了一些有趣的场景，例如

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

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

轻量级体验

由于 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 之间启用漫游。

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

也就是说，越来越多的扩展程序已更新为可以在浏览器中工作，而且每天都会有更多扩展程序出现。

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

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

GitHub Issue Notebooks 扩展将 Notebook 体验带到 GitHub Issues。有了它，你可以将查询、结果，甚至描述查询目的的 Markdown 穿插到一个编辑器中。

GitHub

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

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

好问题！github.dev 是 Web 版 VS Code 的一个自定义实例，它与 GitHub 深度集成。 登录是自动的，URL 格式遵循 github.com 的 /organization/repo 模型，以便你可以简单地将 .com 更改为 .dev 来编辑存储库，并且它使用浅色和深色主题为 GitHub 进行了自定义。

除了 GitHub 上的存储库，Web 版 VS Code 还支持 Azure 存储库（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 存储库，执行相同的操作。将 https://dev.azure.com/… 更改为 'https://vscode.dev/dev.azure.com /…'。

目前，对 Azure 存储库的支持处于读取存储库的预览模式，但我们正在努力尽快实现完整的读/写功能。

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

说到 URL…

与桌面端一样，您可以通过丰富的扩展生态系统自定义 VS Code for the Web，这些扩展支持几乎所有的后端、语言和服务。与桌面端不同的是，通过独特的 vscode.dev URL（如上面提到的 vscode.dev/github 和 vscode.dev/azurerepos），我们可以轻松地通过预装的扩展程序提供自定义体验。

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

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

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

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

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

下一步去哪里？

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

敬请期待更多… 😉

编码愉快，

Chris

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