什么是在线代码编辑器？
在线代码编辑器是驻留在远程服务器上的工具，可以通过浏览器访问。
一些在线代码编辑器具有与文本编辑器更相似的基本特性，而另一些则像完整的集成开发环境(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 美元不等，包括私人代表，无限存储空间和更快的速度。
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/代码编辑器是自然而然的，但是要小心——不要在在线代码编辑器上启动一个庞大的项目。
此总结中没有包括完全专注于面试或没有足够功能被称为完整产品的在线代码编辑器。
