浏览器中的 VS Code 的多种形态

VS Code 是用 Web 技术（HTML、CSS 和 JavaScript）构建的，但今天我敢说它主要用作安装在您机器上的本地应用程序。不过，这种情况正在发生变化，因为 VS Code 在 Web 上可用性的场所出现了爆炸式增长。我认为这是一件大事，因为 VS Code 不仅仅是一个编辑器；它是 Web 开发人员使用的主要编辑器。Web 上的可用性意味着无需安装软件即可使用它，这对于学校等管理所有这些软件很麻烦的地方以及 Chromebook 等根本不安装本地软件的计算机来说意义重大。

实际上，所有这些不同的地方都让人有点困惑，所以让我们看看我今天看到的现状。

vscode.dev

就在我写这篇文章的几周前，微软发布了 vscode.dev。 Chris Dias

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

目前只有 Edge 和 Chrome 拥有此 API，但即使您无法获得它，您仍然可以上传文件，或者可能更有用的是，打开一个仓库。如果它确实有效，它基本上就是……浏览器中的 VS Code。它可以打开您的本地文件夹，其行为与您的本地 VS Code 应用程序基本相同。

我还没有用它工作一整天或类似的事情，但基本用法似乎差不多。您必须执行一些非常明确的权限授予操作，并且键盘命令有点奇怪，因为您必须与浏览器的键盘命令作斗争。此外，没有可用的终端。

除此之外，感觉差不多。即使是“在项目中查找”之类的东西，即使在大型站点上，速度也与本地一样快。

GitHub.dev：在任何 GitHub 仓库上“按句点(.)” 的操作

如果您访问 github.dev，您也可以在浏览器中获得 VS Code，但它的连接方式略有不同。

您在这里没有机会打开本地文件夹。相反，您可以快速查看 GitHub 仓库。

但也许更值得注意的是，您可以进行更改，保存文件，然后使用那里的源代码管理面板提交代码或创建拉取请求。

您可能会认为 vscode.dev 和 github.dev 最终会合并成一个，但谁知道呢。

哦，对了，反过来想一下，您也可以直接在本地安装的 VS Code 中打开 GitHub 仓库（即使没有克隆它）。

前两个没有终端或预览，但 GitHub Codespaces 有。

GitHub Codespaces 也是浏览器中的 VS Code，但更高级。首先，在使用它时，您已认证进入 Microsoft 领域，这意味着它正在运行您在本地运行的所有 VS Code 扩展。但也许更重要的是，您获得了一个可用的终端。当您启动它时，您会看到

欢迎使用 Codespaces！您位于我们的默认镜像上。

• 它包含 Python、Node.js、Docker 等的运行时和工具。在此处查看完整列表：https://aka.ms/ghcs-default-image
• 想改用自定义镜像吗？在此处了解更多信息：https://aka.ms/configure-codespace

🔍 要全面探索 VS Code，请使用命令面板（Cmd/Ctrl + Shift + P 或 F1）进行搜索。

📝 自由编辑，照常运行您的应用程序，我们会自动将其提供给您访问。

在典型的 npm 驱动的项目中，您可以npm run 您的脚本，您将获得一个运行项目的 URL 作为预览。

这与 Gitpod 处于同一领域。

Gitpod 非常类似于 GitHub CodeSpaces，因为它也是浏览器中的 VS Code，但带有一个可用的终端。该终端就像一个完整的 Docker/Linux 环境，因此您在那里拥有强大的功能。它甚至可能能够模拟您的生产环境，假设您使用的是 Gitpod 支持的所有内容。

还值得注意的是，Gitpod 集成了运行服务的“工作区”。在上面的演示项目中，一个 MongoDB 实例在某个端口上运行，另一个端口上打开了一个预览服务器，您可以在那里的模拟浏览器界面中看到它。能够预览您正在处理的项目是绝对必要的，而它们正在优雅地处理这个问题。

也许您还记得我们在关于 DataStax Astra 的视频中使用过 Gitpod（跳转链接），效果非常好。

我（绝对）认为 Gitpod 可能被微软收购。微软似乎正朝着这个方向发展，被收购肯定比被使用核心技术的公司碾压要好。您必须玩一段时间“不，这很好！它验证了市场！我们为您烤了一个笨拙的蛋糕！”，但我无法想象结局会很好。

这也非常类似于 CodeSandbox 或 Stackblitz。

坦率地说，CodeSandbox 和 Stackblitz 也会在浏览器中运行 VS Code。或者……至少利用了 VS Code 的一些零碎部分（Syntax 的最近一期 稍微介绍了 StackBlitz 的方法）。

您也可以在自己的服务器上安装 VS Code。

这就是 Coder 的 code-server。因此，与其使用其他人的 VS Code Web 版本，不如使用您自己的版本。

您可以在本地服务器上运行 VS Code，但我认为这里的大动作是您在您控制的活动云 Web 服务器上运行它。也许是服务器，你知道，您的代码在上面运行，所以您可以用它来逐字编辑服务器上的文件。当您拥有功能齐全的 VS Code 时，谁还需要 VIM（哈哈）。

我们谈到了学校的使用案例，我想这对于学校来说也很有吸引力，因为学校甚至可能不依赖于第三方服务，而是自己托管它。iPad/Chromebook 的使用案例也与此相关，甚至可能更为相关。文档中说“在您外出时节省电池电量；所有密集型任务都在您的服务器上运行”，我想这意味着与 vscode.dev 中“在项目中查找”等任务（大概）在您的本地机器上执行不同，它们是由服务器执行的（可能较慢，但不会比 200 美元的笔记本电脑慢？）。

---

所有这些显然都表明某些东西正在发生。我对基于 Web 的 IDE 持乐观态度。看看 Figma（大获成功）正在发生的事情，我认为这三分之一是由于产品会议屏幕设计师需要很少的膨胀，三分之一是由于简单的团队和权限模型，三分之一是由于它首先构建于 Web 之上。