回顾 12 个面向 Web 开发人员的在线代码编辑器-技术圈

技术编辑：芒果果丨发自思否编辑部

SegmentFault 思否报道丨公众号：SegmentFault

什么是在线代码编辑器？

在线代码编辑器是驻留在远程服务器上的工具，可以通过浏览器访问。

一些在线代码编辑器具有与文本编辑器更相似的基本特性，而另一些则像完整的集成开发环境(Integrated Development environment，IDE)。在本文中，我们将介绍这两种类型。

一些在线代码编辑器专注于一种语言，甚至一个框架。例如，有些产品自称 Javascript 在线代码编辑器或 React 在线编辑器。

在线代码编辑器的基本使用实例

许多方法可以使用在线代码编辑器，但我们要强调几个基本的方法，这些方法证明了对在线代码编辑器的需求。

合作

使用桌面 IDE 设置协作过程可能很困难。有了在线代码编辑器，这项任务就像在谷歌文档中创建文档一样简单。

共享和开发者关系

可以使用在线代码编辑器与同事、朋友或全世界共享您的代码。您可以在博客文章、入门教程和文档中使用沙箱嵌入或链接。

快速安装新应用程序

有一些在线代码编辑器以与主机集成在一起，因此您可以开发一个简单的应用程序并在几分钟内托管它来测试它。

在线面试和招聘

使用在线代码编辑器，可以在一分钟内完成询问，这有助于了解候选人的解决方案和处理代码。

原型设计

尽早并经常测试你的想法。可以验证想法，并从用户那里得到即时反馈。不需要设置。共享和协作选项也将为您提供帮助。

学习

在现代网络开发中，跟随最新的消息是值得的，更好的是，在真实的环境中尝试它们。最好的在线代码编辑器允许您快速地完成这项工作，而不需要不必要的设置。

如何选择在线代码编辑器

大多数有名的在线代码编辑器都有许多出色的功能。其中包括自动完成、 git 集成、插件支持、 CI/CD 管道等。但是这些小事情可以让一个特定的编辑器比其他编辑器更适合你。

选择在线 IDE/代码编辑器时需要注意的一些方面:

应用程序的运行速度
免费编辑：显示多少广告
与存储库管理器集成
易于设置
语言支持
NPM支持
终端支持
大量的文字和布局设置

在线代码编辑器的核心功能

在线代码编辑器必须具备以下基本特征：

分享
布局设置
合作
制表设置
评论
结果视图
基本文件结构

在线代码编辑器的优点：

零安装。你不需要下载，安装和配置 IDE
共享与协作。开始编码，然后将 URL 转发给你的同事，以便继续你的工作或帮助你调试它
零成本或很少成本。绝大多数在线代码编辑器都有免费版本，足以满足您的大多数日常任务
基于订阅的定价。每月支付在线编辑器而不是每年支付许可证费用可能非常有用。

在线代码编辑器的缺点：

功能有限。有些代码编辑器甚至忽略了被称为代码编辑器的基本特性。
性能问题。许多基于 web 的 ide 和代码编辑器都存在性能问题。
没有版本控制，绝大多数的在线代码编辑器没有任何 git 工具的集成。
没有互联网-没有发展。必须在线工作才能使用线代码编辑器。

审查过的代码编辑器

Codesandbox

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

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

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

导入库对于 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 美元不等，包括私人代表，无限存储空间和更快的速度。