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 的推出，我们终于开始实现最初的愿景，即构建一个可以在浏览器中完全无服务器（serverless）运行的开发工具。如需了解完整的历史，请观看 Erich Gamma 在 VS Code Day 上的演讲：《VS Code：一夜成名……背后的十年磨砺》。

那么，你可以在网页版 VS Code 上做什么呢？其实能做的事情相当多……

使用云工具进行本地开发

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

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

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

更轻量的体验

由于网页版 VS Code 完全在浏览器内运行，与桌面应用相比，某些体验自然会受到更多限制。例如，终端和调试器目前不可用，这是合理的，因为你无法在浏览器沙盒内编译、运行和调试 Rust 或 Go 应用程序（尽管 Pyodide 和 Web 容器等新兴技术将来可能会改变这一点）。

代码编辑、导航和浏览体验则更为精细。在桌面端，这些体验通常由依赖文件系统、运行时和计算环境的语言服务和编译器驱动。而在浏览器中，这些体验由完全在浏览器中运行（无文件系统，无运行时）的语言服务提供，它们提供源代码分词（tokenization）、语法高亮、补全以及许多针对单个文件的操作。

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

良好（Good）：对于大多数编程语言，vscode.dev 提供代码语法高亮、基于文本的补全以及括号对颜色区分。利用 Tree-sitter 语法树，我们能够提供额外的体验，例如针对 C/C++、C#、Java、PHP、Rust 和 Go 等主流语言的大纲/转到符号和符号搜索。

更好（Better）：TypeScript、JavaScript 和 Python 的体验完全由原生运行在浏览器中的语言服务驱动。使用这些编程语言，你将获得“良好”类别的体验，外加丰富的单文件补全、语义高亮、语法错误提示等。

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

扩展

大多数 UI 自定义扩展（如主题、快捷键映射和代码片段）都可以在 vscode.dev 中工作，甚至可以通过 设置同步 (Settings Sync) 实现浏览器、桌面端和 GitHub Codespaces 之间的配置漫游。

那些运行 Node.js 代码、使用 OS 特定模块或调用本地可执行文件的扩展，虽然仍会出现在搜索结果中，但会明确标记为不可用。

话虽如此，越来越多的扩展正在更新以支持在浏览器中运行，每天都有更多扩展加入。

注意：如果你是扩展作者，并希望你的扩展能在浏览器中使用（我们非常期待！），请查看我们的 Web 扩展开发指南。

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

GitHub Issue Notebooks 扩展将 Notebook 体验带入了 GitHub Issues。通过它，你可以将查询语句、结果以及描述查询目的的 Markdown 内容交织在一起，整合到同一个编辑器中。

GitHub

许多 VS Code 扩展都适用于存储在 GitHub 中的源代码。例如，CodeTour 扩展允许你创建代码库的引导式导览，而 WikiLens 扩展则将 VS Code 和你的仓库变成了一个强大的笔记工具（具备双向链接功能）。为了方便你在 GitHub 中访问代码，网页版 VS Code 内置了 GitHub Repositories、Codespaces 和 Pull Request 扩展。你可以进行快速编辑、审查 PR，或者选择继续在本地克隆 (Continue on) 开发，甚至如果需要更强大的语言服务功能，或在合并提交前进行构建、运行和测试，还可以直接转入 GitHub Codespace。

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

问得好！github.dev 是网页版 VS Code 的一个定制化实例，与 GitHub 进行了深度集成。登录是自动的，URL 格式遵循 github.com 的 /organization/repo 模型，因此你可以简单地将 .com 改为 .dev 来编辑仓库，它还针对 GitHub 的明暗主题进行了定制。

除了 GitHub 仓库，网页版 VS Code 还支持 Azure Repos（Azure DevOps 的一部分）。为了同时支持两者，网页版 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……

和桌面端一样，你可以通过丰富的扩展生态系统定制网页版 VS Code，这些扩展几乎支持所有的后端、语言和服务。与桌面端不同的是，我们可以通过独特的 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 用户指南中了解更多信息）。

欢迎使用此 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 直播。