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：一夜成名…酝酿十年”。
那么，你可以在 VS Code 网页版上做什么呢？其实不少…
使用云工具进行本地开发
支持 文件系统访问 API 的现代浏览器（目前有 Edge 和 Chrome）允许网页（经你许可）访问本地文件系统。这个简单的本地机器访问通道迅速为使用 VS Code 网页版作为零安装本地开发工具打开了一些有趣的场景，例如：
- 本地文件查看和编辑。快速使用 Markdown 做笔记（并预览！）。即使你在一个受限制的机器上无法安装完整的 VS Code，你仍然可以使用 vscode.dev 来查看和编辑本地文件。
- 结合浏览器工具进行调试，构建客户端 HTML、JavaScript 和 CSS 应用程序。
- 在像 Chromebook 这样的低性能机器上编辑你的代码，在这些机器上你无法（轻松）安装 VS Code。
- 在你的 iPad 上进行开发。你可以上传/下载文件（甚至使用 Files 应用将其存储在云端），还可以使用内置的 GitHub Repositories 扩展远程打开仓库。
此外，如果你的浏览器不支持本地文件系统 API，你仍然可以通过浏览器上传和下载文件来打开单个文件。
轻量级（更轻量）的体验
由于 VS Code 网页版完全在浏览器中运行，与桌面应用相比，某些体验自然会受到更多限制。例如，终端和调试器不可用，这是合理的，因为你无法在浏览器沙盒中编译、运行和调试 Rust 或 Go 应用程序（尽管 Pyodide 和 web 容器等新兴技术将来可能会改变这一点）。
更加细微的差别体现在代码编辑、导航和浏览体验上。在桌面上，这些体验通常由需要文件系统、运行时和计算环境的语言服务和编译器提供支持。在浏览器中，这些体验由完全在浏览器中运行（无文件系统、无运行时）的语言服务提供支持，这些服务提供源代码分词和语法着色、补全以及许多单文件操作。
因此，在浏览器中，体验通常分为以下几类：
良好：对于大多数编程语言，vscode.dev 提供代码语法着色、基于文本的补全以及括号对彩色化。使用 Tree-sitter 语法树，我们能够为流行的语言（如 C/C++、C#、Java、PHP、Rust 和 Go）提供额外体验，例如 大纲/转到符号 和 符号搜索。
更好：TypeScript、JavaScript 和 Python 的体验都由原生在浏览器中运行的语言服务提供支持。对于这些编程语言，你将获得“良好”的体验，外加丰富的单文件补全、语义高亮、语法错误等等。
最佳：对于许多“网页相关”语言，如 JSON、HTML、CSS 和 LESS，vscode.dev 中的编码体验几乎与桌面版相同（包括 Markdown 预览！）。
扩展
大多数 UI 自定义扩展，如主题、键映射和代码片段，都可以在 vscode.dev 中使用，你甚至可以通过 设置同步 在浏览器、桌面和 GitHub Codespaces 之间启用漫游。
运行使用操作系统特定模块或调用本地可执行文件的 Node.js 代码的扩展仍会显示在搜索结果中，但会明确标记为不可用。
话虽如此，目前有越来越多的扩展已更新支持在浏览器中工作，并且每天都有新的扩展加入。
注意：如果你是扩展作者，并希望你的扩展可在浏览器中使用（我们也希望！），请查看我们的 Web 扩展开发指南。
例如，Luna Paint - Image Editor 扩展允许你直接在 VS Code 中编辑栅格图像。该扩展为 VS Code 带来了丰富的图像设计工具（例如，图层和混合工具），当然你也可以将图像保存到本地磁盘。
通过 GitHub Issue Notebooks 扩展，你可以将笔记本体验引入 GitHub Issues。通过它，你可以将查询、结果，甚至描述查询用途的 Markdown 内容交织在一起，形成一个编辑器。
GitHub
许多适用于 VS Code 的扩展都与存储在 GitHub 上的源代码配合使用。例如，CodeTour 扩展允许你创建代码库的导览，而 WikiLens 扩展则将 VS Code 和你的仓库变成强大的笔记工具（支持双向链接）。为了方便访问 GitHub 中的代码，VS Code 网页版内置了 GitHub Repositories、Codespaces 和 Pull Request 扩展。你可以进行快速编辑、评审拉取请求，以及继续到本地克隆，或者更好的方式是继续到 GitHub Codespace，如果你需要更强大的语言体验或需要在合并提交之前构建、运行和测试更改。
哇，听起来很像 github.dev，是吗？它们不同吗？相同吗？为什么有两个？？！！
好问题！github.dev 是 VS Code 网页版的一个定制实例，它深度集成到 GitHub 中。登录是自动的，URL 格式遵循 github.com 的 /组织/仓库 模型，因此你只需将 .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 网页版 直播。