12 款主流在线代码编辑器对比：谁比 GitHub Codespaces 更香？

可以为每个流行的前端框架使用模板。React、Vue、Angular 和 Preact 像 Gatsby、Next 等一样。

Codesandbox 将自己定位为一个开发平台。社区提供了很多模板。此外，您可以使用文件结构和依赖关系为特定用例创建自己的模板，如 IDE 中所示。 该工具与 Github 集成，可以轻松创建提交和打开 PRs。开箱即用，您可以将应用程序部署到 ZEIT (现 Vercel) 或 Netlify。

对于前端，在线代码编辑器中支持 NPM。此外，还有一个热模块重新加载。当然，每个沙箱都有一个安全的 URL，并且支持 HTTPS，用于分享和反馈。

至于与代码沙箱的写作，可以与同事在线工作，与他们聊天，并控制谁可以进行编辑或观看代码。

还有许多其他功能，比如：

• 测试视图
• 内置终端
• 自动运行 Jest 测试
• 热模块重新加载
• 项目组织
• 以 zip 形式导出代码
• 内置连接器 (ESlint)

至于价格，Codesandbox Pro 版本的价格为 9 美元，其中包括私有 GitHub 存储库和无限个私有沙箱。

Playcode

Playcode 只是一个简单的工具，用于快速构建原型和查看编码结果。该工具具有典型的三窗口布局：代码编辑器、控制台和结果视图。该产品有一个基本的文件结构，但没有版本控制和其他 IDE 特性。

它只支持 Javascript，HTML 和 CSS。还有一个选项可以选择编辑器样式、字体大小和其他文本编辑功能。

Codepen

代码编辑器可能是在线代码编辑器市场上最流行的工具。这个平台在某种程度上已经开始发展成为社交网络，类似于 Pinterest。工程师可以在平台上分享他们的最佳实践和标识，并获得社区的认可。

该工具内部有完善的搜索功能。可以发现感兴趣的模板、项目、代码片段和主题。 Codepen 的最大特色是学习和发现新技术和最佳实践。浏览、工作和使用 Pens 是了解它们是如何构建和代码如何工作的一个很好的方式。

另一个有趣的细节——代码的演示模式。在会议、聚会和讲台上非常有用。

显著特点:

• 文件系统
• 自动完成
• 私人沙箱
• 网站设置
• 协作模式

价格从每月 8 美元到 26 美元不等，还有免费的限量版。

Stackblitz

Stackblitz 与完整的 IDE 非常相似，该工具是基于 VS 代码构建的。该产品具有广泛的特性，可以启动并继续开发完整的全堆栈应用程序。该工具由许多开发人员所熟悉的 Visual Studio Code 提供支持。

它会自动处理安装依赖项、编译、捆绑和热重载。

导入库对于 web 开发至关重要，所以 StackBlitz 包含了一个内置浏览器 npm 客户端，它支持一次安装多个软件包和特定的版本。

该项目的杀手级功能是离线编辑。Stackblitz 开发了一个浏览器内的网络服务器来实现这一点。通过 Stackblitz，您可以在单独的窗口中预览和编辑，这与其他项目中的 iframe 或小窗口相比是非常棒的。

其他值得注意的特性包括与 Github 连接以导入/导出项目，与 Google Firebase 集成以创建全堆栈项目，以及像 ZIP 文件那样下载项目。

Codeanywhere

Codeanywhere 伪装为 Web 浏览器和移动设备中的完整 IDE。

Codeanywhere 可以很容易地用 Javascript、PHP、HTML 和其他 72 种语言为您的项目建立自己的定制开发环境。

显而易见的主要特性是 Codeanywhere 可以连接任何东西，代码可以驻留在 FTP 服务器或者其他 Github 源代码上，但是你可以将它与 Codeanywhere 连接并开始编辑和开发。

在编辑器模式下，可以使用以下特性:

• 代码完成
• Linting（js，CSS）
• 多个游标
• 代码美化

此外，您可以发挥布局和颜色的编辑器的修改。该工具有自己的内置终端。您还可以与任何开发人员共享整个项目、文件或文件夹。每个共享都可以有自己独特的权限。

Codeanywhere 包含一个实用的差异特性，允许您查看修订之间的差异，甚至允许您恢复到以前的代码状态。还有与 git 知识库和工具的深度集成，这些工具可以简化开发操作过程。这个产品适合那些想要移动到云端并永远留在那里的开发者。

JSfiddle

JSfiddle 是一个简单而又非常流行、快速和高效的在线代码编辑器。该工具允许您快速共享代码，并可视化查看结果，StackOverflow 与它集成在一起。 在视觉上，与大多数竞争者一样，该界面分为 4 个块：一个用于编写代码的块、一个用于编辑 CSS、SCSS 或 sass 的代码，一个用于 HTML 布局的块以及一个具有可见工作结果的块。

代码编辑块支持以下语言:

• Pure Javascript
• React、Preact
• Babel + JSX
• Coffee script、Vue
• Type script

还可以在此块中更改各种设置，如加载类型、框架类型和框架属性。这个工具还有非常好和完整的文档，以及一个开发的社区，它可以投票决定哪些特性将首先被开发接受。

使用 Vue、Jquery、React + JSX 和其他语言编写的一些流行样板文件也促进了开发。至于缺点，JSfiddle 只用于前端工作。它不支持文件和文件夹的概念，也没有办法构建 CI/CD 管道。

一般来说，这是测试新框架最合乎逻辑和最酷的选择之一，在新产品的文章和演示中演示代码。

Htmlcodeeditor

此代码编辑器只适用于编辑 HTML，完全免费使用。值得注意的功能包括:

• 自动完成
• 标题中的基本标记
• 标签向导
• 查找和替换标签的特性
• 具有多种清洁功能
• 这个工具的缺点是有大量的广告

Repl.it

Repl.it 是最强大的在线开发工具之一。该产品支持多种语言和框架，包括现代流行的 Haskell、Kotlin 和著名的 Javascript、C++、Ruby 等。

主页开始于语言搜索，然后提供选择以下类别之一：Web 开发，游戏开发等。然后，您需要选择语言并创建代表。

即使在免费版本中，您也可以创建文件结构、控制版本和安装包。在设置中，您可以编辑布局、主题、字体大小和缩进大小。共享选项包括嵌入链接、普通链接、与 dev.to 社区集成。还有一个叫做'对话'的社交媒体功能，开发者可以在这里分享收到的反馈和代码。还有一个很大的功能叫做教室，在这里你可以创建教室，邀请学生并追踪进度。

Repl 已被 Facebook、MIT、Google 等公司和组织使用。

价格从免费到每月 7 美元不等，包括私人代表，无限存储空间和更快的速度。

Jsoneditoronline

Jsoneditoronline 是一个基于 web 的工具，用于查看、编辑和格式化 JSON。它在一个清晰的、可编辑的树形视图或代码编辑器中并排显示数据。您可以在本地或云中存储文档。

您还可以使用链接共享文档，将 JSON 文件视为普通代码或树，进行查询，当然，还可以在本地保存文件。这是在任何设备上都不使用设置和文本编辑器编辑 JSON 文件的一个很好的选择。

Codeply

Codeply: 市场上又一个快速编辑 Javascript 及其框架的工具。该产品最初于 2014 年发布，2019 年发布了第二版。

可以让你编辑 angular、react、Vue、HTML 引导程序和纯 Javascript。该公司背后的团队表示，该产品适用于快速原型设计，创建模型，学习和探索新的流行库、API、插件和框架。

标准功能集包括布局设置、结果预览、现成模板和社交网络元素。与其他工具相比，速度相当独特。

Gitpod

Gitpod 旨在保持代码始终处于测试状态并保持最新状态。它与 Github 紧密集成：每次更新代码时，它都会运行测试。

该产品具有 VScode 接口，并支持所有主要的后端/前端语言和框架（如 Django、Rails、Revel 等）。

Plnkr

Plunker 是一个在线社区，用于创建，协作和共享 Web 开发想法。

Plunker 的核心功能是速度。尽管复杂，但 Plunker 编辑器的设计目的是在 2 秒内加载。

显著特点:

• 实时代码协作
• 全功能，可定制的语法编辑器
• 代码更改的实时预览
• As-you-type 代码列表
• 分享、评论和分享 Plunks
• 在 MIT 许可下在 GitHub 上完全开源

结论

这些是最可行的在线代码编辑器和在线运行的 IDE。在某些情况下，使用在线 IDE/代码编辑器是自然而然的，但是要小心——不要在在线代码编辑器上启动一个庞大的项目。

此总结中没有包括完全专注于面试或没有足够功能被称为完整产品的在线代码编辑器。