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 一夜成名……十年磨一剑”。
那么，你可以在 Web 版 VS Code 上做什么呢？实际上，还不少……
使用云工具进行本地开发
支持 文件系统访问 API 的现代浏览器（目前是 Edge 和 Chrome）允许网页访问本地文件系统（需要你的许可）。这个简单的本地机器网关迅速为将 Web 版 VS Code 用作零安装的本地开发工具开启了一些有趣的场景，例如：
- 本地文件查看和编辑。快速使用 Markdown 记录笔记（并预览！）。即使你在受限机器上无法安装完整版 VS Code，你仍然可以使用 vscode.dev 来查看和编辑本地文件。
- 结合浏览器工具进行调试，构建客户端 HTML、JavaScript 和 CSS 应用程序。
- 在 Chromebook 等低功耗机器上编辑你的代码，在这些机器上你无法（轻松地）安装 VS Code。
- 在你的 iPad 上进行开发。你可以上传/下载文件（甚至使用“文件”应用将其存储在云端），还可以通过内置的 GitHub Repositories 扩展远程打开仓库。
而且，如果你的浏览器不支持本地文件系统 API，你仍然可以通过浏览器上传和下载单个文件来打开它们。
一种更轻量级的体验
由于 Web 版 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 - 图像编辑器扩展允许你直接在 VS Code 中编辑位图图像。该扩展为 VS Code 带来了丰富的设计工具（例如，图层和混合工具），当然你也可以将图像保存到本地磁盘。
The GitHub Issue Notebooks 扩展将 Notebook 体验带到 GitHub Issues。通过它，你可以在一个编辑器中交错查询、结果，甚至是描述查询目的的 Markdown。
GitHub
许多 VS Code 扩展都支持存储在 GitHub 中的源代码。例如，CodeTour 扩展允许你创建代码库的引导式演练，而 WikiLens 扩展则将 VS Code 和你的仓库变成一个强大的笔记工具（支持双向链接）。为了方便你在 GitHub 中访问代码，Web 版 VS Code 内置了 GitHub Repositories、Codespaces 和 Pull Request 扩展。你可以进行快速编辑、审查 PR，并继续到本地克隆，或者更好的是，如果需要更强大的语言体验或需要在合并提交之前构建、运行和测试更改，则可以继续到 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。
在这里，你可以“实时”体验 Night Owl 流行颜色主题，由 @sarah_edo 制作，无需经过下载和安装过程，只需看看你是否喜欢它。无需安装！如果你是主题作者，你甚至可以在你的 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
P.S. 如果你错过了，可以观看我们的Web 版 VS Code 直播。