vscode.dev(!)
2021 年 10 月 20 日，作者：Chris Dias，@chrisdias
回溯到 2019 年，当 .dev 顶级域名开放时，我们买下了 vscode.dev 并迅速将其停靠，指向我们的网站 code.visualstudio.com（或者，如果你像我一样来自波士顿地区，我们会说“停好了”）。就像许多购买了 .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 上进行开发。您可以上传/下载文件（甚至使用“文件”应用将它们存储在云端），还可以使用内置的 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 之间启用漫游。
运行使用操作系统特定模块的 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 和 拉取请求扩展。您可以进行快速编辑、审查拉取请求，然后继续使用本地克隆，或者更好的是，如果需要更强大的语言体验或需要在合并提交之前构建、运行和测试更改，可以继续使用 GitHub 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。
在这里，您可以“实时”体验由 @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 将传递给扩展，以实现无缝加入体验。
vscode.dev URL 的可能性是无限的，我们有很多令人兴奋的想法，将在未来几个月与您分享。
下一步是什么？
将 VS Code 带到浏览器中是产品最初愿景的实现。它也是一个全新愿景的开始。一个任何拥有浏览器和互联网连接的人都可以使用的临时编辑器，这是实现未来我们可以真正随时随地编辑任何内容的基石。
敬请期待更多精彩内容……😉
愉快地编码，
Chris
附注：如果您错过了，可以观看我们的Web 版 VS Code 直播回放。