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 An Overnight Success…10 Years in the Making"。

那么，你可以在VS Code网页版上做些什么呢？实际上有很多…

使用云工具进行本地开发

支持文件系统访问API的现代浏览器（目前是Edge和Chrome）允许网页访问本地文件系统（在您的许可下）。这个通往本地机器的简单网关迅速开启了一些有趣的场景，例如将VS Code for the Web用作零安装的本地开发工具，例如：

• 本地文件查看和编辑。快速在Markdown中记笔记（并预览！）。即使您在一台受限的机器上无法安装完整的VS Code，您仍然可以使用vscode.dev来查看和编辑本地文件。
• 结合浏览器工具构建客户端HTML、JavaScript和CSS应用程序以进行调试。
• 在低性能的机器上（如Chromebooks）编辑代码，这些机器上无法（轻松）安装VS Code。
• 在您的iPad上进行开发。您可以上传/下载文件（甚至可以使用文件应用程序将它们存储在云端），以及使用内置的GitHub存储库扩展远程打开存储库。

而且，如果您的浏览器不支持本地文件系统API，您仍然可以通过浏览器上传和下载单个文件来打开它们。

更轻量级的体验

由于VS Code for the Web完全在浏览器中运行，与桌面应用程序相比，某些体验自然会受到更多限制。例如，终端和调试器不可用，这是有道理的，因为你无法在浏览器沙箱中编译、运行和调试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预览！）。

扩展

大多数用户界面自定义扩展，如主题、键位映射和代码片段，在vscode.dev中都可以使用，你甚至可以通过设置同步在浏览器、桌面和GitHub Codespaces之间启用漫游。

运行使用操作系统特定模块或调用本地可执行文件的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 实例，深度集成到 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…

与桌面版类似，您可以通过丰富的扩展生态系统为Web版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 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带到浏览器中实现了该产品的最初愿景。这也是一个全新开始的起点。一个任何人都可以通过浏览器和互联网连接访问的临时编辑器，为我们未来能够真正从任何地方编辑任何内容奠定了基础。

敬请期待更多… 😉

编码愉快，

克里斯

附注：如果你错过了，你可以观看我们的VS Code for the Web直播。