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 日演讲"VS Code 一夜成名……历经十年"。
那么，你可以在网页版 VS Code 上做什么？实际上很多……
使用云工具进行本地开发
支持文件系统访问 API（今天是 Edge 和 Chrome）的现代浏览器允许网页访问本地文件系统（经过你的许可）。这个通往本地机器的简单网关迅速为使用网页版 VS Code 作为零安装本地开发工具打开了一些有趣的场景，例如
- 本地文件查看和编辑。在 Markdown 中快速记笔记（并预览！）。即使你在无法安装完整 VS Code 的受限机器上，你仍然可以使用 vscode.dev 来查看和编辑本地文件。
- 结合浏览器工具构建客户端 HTML、JavaScript 和 CSS 应用程序进行调试。
- 在 Chromebook 等低功率机器上编辑你的代码，在这些机器上你无法（轻松）安装 VS Code。
- 在你的 iPad 上开发。你可以上传/下载文件（甚至使用 Files 应用程序将它们存储在云端），以及使用内置的 GitHub 存储库扩展远程打开存储库。
而且，如果你的浏览器不支持本地文件系统 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 - 图像编辑器 扩展允许你在 VS Code 中直接编辑光栅图像。该扩展将丰富的设计工具（例如，图层和混合工具）带到 VS Code，当然你也可以将图像保存到本地磁盘。
该GitHub 问题笔记本 扩展将笔记本体验带到 GitHub 问题。有了它，你可以将查询、结果，甚至描述查询目的的 Markdown，一起整合到一个编辑器中。
GitHub
许多 VS Code 扩展使用存储在 GitHub 中的源代码。例如，CodeTour 扩展允许你创建代码库的引导式演练，而WikiLens 扩展将 VS Code 和你的存储库变成一个强大的笔记工具（具有双向链接）。为了方便访问 GitHub 中的代码，网页版 VS Code 内置了GitHub 存储库、Codespaces 和拉取请求 扩展。你可以快速编辑、审查拉取请求，以及继续使用本地克隆，或者更好的，使用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 中创建一个徽章，让用户直接从市场测试你的主题（在网页版 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. 如果你错过了，可以观看我们的 VS Code for the Web 直播。