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 的可用，我们终于能够实现构建一个完全无服务器、可在浏览器中运行的开发工具的原始愿景。要了解完整的历史，请观看 Erich Gamma 在 VS Code Day 上的演讲 “VS Code：一夜成名…十年磨一剑”。
那么，您可以在 VS Code for the Web 上做什么呢？其实有很多…
通过云工具进行本地开发
支持 File System Access API 的现代浏览器（目前是 Edge 和 Chrome）允许网页访问本地文件系统（需您授权）。这个连接本地机器的简单入口，能够快速开启一些有趣的场景，将 VS Code for the Web 用作零安装的本地开发工具，例如：
- 本地文件查看和编辑。快速记录笔记（并预览！）Markdown。即使您在一台受限的机器上，无法安装完整的 VS Code，您仍然可以使用 vscode.dev 查看和编辑本地文件。
- 结合浏览器工具进行调试，构建客户端 HTML、JavaScript 和 CSS 应用程序。
- 在性能较低的机器（如 Chromebook）上编辑代码，在这些机器上您（不易）安装 VS Code。
- 在 iPad 上进行开发。您可以上传/下载文件（甚至使用 Files 应用将它们存储在云端），还可以使用内置的 GitHub Repositories 扩展远程打开仓库。
而且，如果您的浏览器不支持本地文件系统 API，您仍然可以通过浏览器上传和下载单个文件来打开它们。
更轻量的体验
由于 VS Code for the Web 完全在浏览器中运行，与桌面应用程序相比，一些体验自然会受到更多限制。例如，终端和调试器不可用，这是可以理解的，因为您无法在浏览器沙箱内编译、运行和调试 Rust 或 Go 应用程序（尽管像 Pyodide 和 Web Containers 这样的新兴技术未来可能会改变这一点）。
代码编辑、导航和浏览体验则更为微妙。在桌面端，这些体验通常由语言服务和编译器提供支持，这些服务和编译器依赖于文件系统、运行时和计算环境。在浏览器中，这些体验由完全在浏览器中运行的语言服务提供支持（没有文件系统，没有运行时），它们提供源代码的标记化、语法着色、自动补全以及许多单文件操作。
因此，在浏览器中，体验通常分为以下几类：
良好：对于大多数编程语言，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 之间启用漫游。
使用 OS 特定模块的 Node.js 代码扩展，或调用本地可执行文件的扩展，仍然会显示在搜索结果中，但会被明确标记为不可用。
尽管如此，已有越来越多的扩展已更新为可在浏览器中运行，并且每天都有更多扩展加入。
注意：如果您是扩展作者，并希望您的扩展可在浏览器中使用（我们非常希望！），请查阅我们的 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 for the Web 内置了 GitHub Repositories、Codespaces 和 Pull Request 扩展。您可以进行快速编辑、审查 PR，然后**继续**到本地克隆，甚至更好地，到 GitHub Codespace，如果您需要更强大的语言体验或需要构建、运行和测试更改后再合并提交。
哇，听起来很像 github.dev，对吧？它们有区别吗？相同吗？为什么有两个？？！！
好问题！github.dev 是 VS Code for the Web 的一个定制化实例，与 GitHub 深度集成。登录是自动的，URL 格式遵循 github.com 的 /organization/repo 模型，因此您可以简单地将 .com 改为 .dev 来编辑仓库，并且它针对 GitHub 进行了定制，拥有浅色和深色主题。
除了 GitHub 上的仓库，VS Code for the Web 还支持 Azure Repos（Azure DevOps 的一部分）。为了同时支持两者，VS Code for the Web 支持两条路径：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 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 直播。