我正在参加「掘金·启航计划」
前些天读完 用 git bisect 快速定位你想找的 commit - 掘金 (juejin.cn)，突然想到如果文末有一个 Playground 能直接上手操练，那就更好了。
联想到不少场景有 Cloud Editor 的需求，例如阅读源码时需要让项目跑起来加点断点调试，参与开源项目交流问题时重现出现问题的场景，在开发文档或者是技术教程中快速跑起一个 Playground。
我把这些场景归纳为以下几个需求点
- 快捷分享：通过共享链接直接访问和 Fork
- IDE 支持：支持项目运行和调试，支持命令行操作
- 环境支持：支持多种编程语言和项目运行环境
- 费用可观
市面上的服务商有 Github Codespace、Gitpod、CodeSandbox、StackBlitz、Codepen，我对他们的定位目前并没有一个清晰的了解，不如就来调研一番，把强大的工具用在合适的场景上
Github Codespace：Github 的强力辅助
我们在一个 GitHub 仓库中轻击 . 键，便能在 github.dev/ 提供的 VSCode 在线编辑器中阅读项目，但却无法在此跑起项目。
别急着 Clone 到本地，GitHub Codespace 可以直接在云端起一个环境跑起项目，通过在线或本地的 VSCode 编辑器和它交互。
VSCode 编辑器配备命令行终端、支持代码调试、支持 GitHub 操作，具备代码编辑器的基本素养。如果想要用更加专业的 IDE，也能用 JetBrains Gateway 让 WebStorm/IDEA 等 J 家 IDE 连接上 Codespace。
Codespace 本质上是在 Azure 云端创建了一个 Docker 容器，在其中安装好项目所需的开发环境，通过和代码编辑器通信来同步状态。项目所需的开发环境可以通过 .devcontainer 来自定义，Codespace 的本质是 Docker，因此可以通过配置 Dockerfile 或 Docker Compose 来设置。
GitHub - VSCode - Azure 云服务，微软这一环接一环的生态布局也是挺妙的。但职责明确、联系紧密的生态，也意味着 GitHub Codespace 的定位局限于 Github 的强力辅助，代码分享需要依赖于 GitHub 仓库，功能也只服务于 GitHub 一家平台。
收费方面，Codespace 每个月有免费使用时长，超出时长按时收费，双核环境每月免费运行时长为 60 小时
GitHub Codespace 作为 Github 的强力辅助，非常适合阅读 GitHub 仓库源码、临时的远程开发这类场景。
- 分享：只能通过 Github 仓库分享
- IDE 支持：支持项目运行、调试、Terminal，支持 VSCode 和 JetBrains 家产品
- 环境支持：本质是云端 Docker，通过
.devcontainer配置，自由度很高 - 费用：双核环境每月免费运行时长 60 小时
- 账户：只限 GitHub
官方站点：GitHub Codespaces
Gitpod：代码即时启动
Gitpod 的设计理念是"代码即时启动"，即无论何时何地，只要你有一个浏览器和网络连接，你都可以立即开始编程。
Gitpod 覆盖的功能和 Github Codespace 一致，但它是一个开源的 Kubernetes 应用程序，可以运行于任何安装了 Kubernetes 的平台。同时 Gitpod 开源第三方的角色，也允许他同时集成 GitHub、GitLab、Bitbucket 等代码托管平台。
Gitpod 可以通过链接分享当前空间或空间的快照，接收者能够直接访问当前空间或者根据快照启动一个新的空间实例。
Gitpod 的在线编辑器同样是用了 VSCode Editor，同时也支持 VSCode 和 JetBrains 家的本地 IDE
Gitpod 默认使用 Docker 作为虚拟容器，通过 .gitpod.yml 自定义运行环境。
Gitpod 是一个优秀的独立产品，尽管开源的尽头是卖云服务😂，但 Gitpod 在产品体验、平台支持上做的很好。脱离微软生态，Gitpod 是 Github Codespace 的完美替代。
- 分享：可通过链接共享空间和快照
- IDE 支持：支持项目运行、调试、Terminal，支持 VSCode 和 JetBrains 家产品
- 环境支持：通过
.gitpod.yml配置，自由度很高 - 费用：每月免费运行时间 50 小时
- 账户：不限平台，GitHub、GitLab、Bitbucket 都支持
官方站点： Gitpod: Always ready to code.
CodeSandbox：Browser + Cloud 双面战士
Codesandbox 初期给我的印象是 Codepen 的强化版本，偏向于前端代码的即时编辑、效果分享，但现在 Codesandbox 也提供了 Cloud 支持。
现在有两类 Sandbox：一种是在浏览器中直接运行的 Browser Sandbox，一种是在云端起 Docker 的 Cloud Sandbox。
我的理解是 Browser Sandbox 对标 Codepen，用来写点轻量化的 Demo；Cloud Sandbox 对标 Gitpod/Codespaces 支持即时运行和编辑项目。
分享和协作是 Codesandbox 的特色卖点，打开分享链接， Fork 到我的 Sandbox 写写改改，整个流程非常顺滑。
CodeSandbox 的编辑器用的是自己研发的一套，能满足 Browser Sandbox 的轻量化开发。但不支持调试，用来运行项目还是差一点，得配合本地 VSCode Editor 一起使用。Terminal 也是只提供给 Cloud Sandbox。
CodeSandbox 目前免费力度还是挺大的，按空间而非时长计量
Codesandbox 提供了两方面的功能，不管是 Browser 还是 Cloud，我觉得它非常适合在交流问题时做 Bug 重现、或者是在技术教程中给一个 Playground，重点在轻量化编辑和流畅分享。
- 分享：Share & Fork 模式
- IDE 支持：支持运行，不支持调试，支持本地 VSCode Editor
- 环境支持：Cloud Sandbox 通过
.codesandbox配置 Docker 环境 - 费用：不限时长，免费空间 6 GB
官方站点： codesandbox.io/
StackBlitz：随时随地运行 NodeJS
围绕 WebContainers，StackBlitz 提供了前端 Online Editor、多端实时预览、嵌入可交互文档这些应用场景。
Codesandbox 中说到的前端向的代码分享，用 StackBlitz 也是一个不错的选择。
- 分享：Share & Fork 模式
- IDE 支持：不支持项目调试，根据项目项目是否需要 Node.js 环境决定使用 WebContainers 还是 EngineBlock 环境，后者不提供 Terminal
- 环境支持：只支持 JS/NodeJS 相关的环境
- 费用：Public 仓库免费
官方站点： stackblitz.com/
Codepen：轻便、分享、社区
- 写点简单的小效果，分享出去
- 逛逛社区 Trending 里有哪些有趣的效果，看看代码实现
大项目请出门左拐，Codepen 只做小而美的分享社区
- 分享：Share & Fork 模式
- IDE 支持：HTML + JS + CSS，顶多加个 Vue
- 环境支持：HTML + JS + CSS，顶多加个 Vue
- 费用：免费使用公开 Pen 和模板
官方站点： codepen.io/
总结
现在对每个平台的功能和强项都有些了解了，来总结下应用场景吧
- 涉及大项目，项目源码阅读或临时修改源码
- GitHub 托管的项目：GitHub Codespace 最便捷，Gitpod 也能搞定
- 项目托管在其他平台或者临时修改后分享：Gitpod
- 分享问题重现环境或 Playground：Codesandbox 和 StackBlitz 都不错
- 写点简单的效果：Codepen
