vscode.dev(!)
作者：Chris Dias，发布于 2021 年 10 月 20 日，@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 上你能做什么呢？其实能做的相当多……
使用云工具进行本地开发
支持 文件系统访问 API 的现代浏览器（目前是 Edge 和 Chrome）允许网页在获得你的许可后访问本地文件系统。这个通往本地机器的简单网关迅速为将网页版 VS Code 用作零安装的本地开发工具开启了一些有趣的场景，例如：
- 本地文件查看和编辑。快速用 Markdown 做笔记（并预览！）。即使你在一台受限的机器上无法安装完整版的 VS Code，你仍然可以使用 vscode.dev 来查看和编辑本地文件。
- 结合浏览器工具来构建客户端的 HTML、JavaScript 和 CSS 应用程序并进行调试。
- 在像 Chromebook 这样性能较低的机器上编辑你的代码，在这些设备上你无法（轻易地）安装 VS Code。
- 在你的 iPad 上进行开发。你可以上传/下载文件（甚至可以使用“文件”应用将它们存储在云端），也可以通过内置的 GitHub Repositories 扩展远程打开仓库。
而且，如果你的浏览器不支持本地文件系统 API，你仍然可以通过浏览器上传和下载来打开单个文件。
更轻量级的体验
由于网页版 VS Code 完全在浏览器内运行，与你在桌面应用中能做的事情相比，某些体验自然会受到更多限制。例如，终端和调试器不可用，这是合乎情理的，因为你无法在浏览器沙箱内编译、运行和调试 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 之间启用漫游。
那些运行使用操作系统特定模块或调用本地可执行文件的 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 上的代码，网页版 VS Code 内置了 GitHub Repositories、Codespaces 和 Pull Request 扩展。你可以进行快速编辑、审查 PR，并继续到本地克隆，或者更好的选择是，到一个 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 直播。