在线代码编辑器通过浏览器提供远程开发环境，分为基础编辑器和完整 IDE 两类。本文对比了 12 款主流工具，包括 Codesandbox、Stackblitz、Repl.it 等。它们具备零安装、实时协作、多语言支持及云端部署等优势，但也存在性能限制和离线功能不足的问题。选择时需考虑运行速度、语言支持、Git 集成及成本。对于前端快速原型设计和团队协作，在线编辑器是高效选择；但大型项目建议本地 IDE。
在线代码编辑器是驻留在远程服务器上的工具，可以通过浏览器访问。
一些在线代码编辑器具有与文本编辑器更相似的基本特性，而另一些则像完整的集成开发环境（Integrated Development Environment, IDE）。在本文中，我们将介绍这两种类型。
一些在线代码编辑器专注于一种语言，甚至一个框架。例如，有些产品自称 Javascript 在线代码编辑器或 React 在线编辑器。
许多方法可以使用在线代码编辑器，但我们要强调几个基本的方法，这些方法证明了对在线代码编辑器的需求。
使用桌面 IDE 设置协作过程可能很困难。有了在线代码编辑器，这项任务就像在谷歌文档中创建文档一样简单。
可以使用在线代码编辑器与同事、朋友或全世界共享您的代码。您可以在博客文章、入门教程和文档中使用沙箱嵌入或链接。
有一些在线代码编辑器以与主机集成在一起，因此您可以开发一个简单的应用程序并在几分钟内托管它来测试它。
使用在线代码编辑器，可以在一分钟内完成询问，这有助于了解候选人的解决方案和处理代码。
尽早并经常测试你的想法。可以验证想法，并从用户那里得到即时反馈。不需要设置。共享和协作选项也将为您提供帮助。
在现代网络开发中，跟随最新的消息是值得的，更好的是，在真实的环境中尝试它们。最好的在线代码编辑器允许您快速地完成这项工作，而不需要不必要的设置。
大多数有名的在线代码编辑器都有许多出色的功能。其中包括自动完成、git 集成、插件支持、CI/CD 管道等。但是这些小事情可以让一个特定的编辑器比其他编辑器更适合你。
选择在线 IDE/代码编辑器时需要注意的一些方面:
在线代码编辑器必须具备以下基本特征：
在线代码编辑器的优点：
在线代码编辑器的缺点：
可以为每个流行的前端框架使用模板。React、Vue、Angular 和 Preact 像 Gatsby、Next 等一样。
Codesandbox 将自己定位为一个开发平台。社区提供了很多模板。此外，您可以使用文件结构和依赖关系为特定用例创建自己的模板，如 IDE 中所示。 该工具与 Github 集成，可以轻松创建提交和打开 PRs。开箱即用，您可以将应用程序部署到 ZEIT (现 Vercel) 或 Netlify。
对于前端，在线代码编辑器中支持 NPM。此外，还有一个热模块重新加载。当然，每个沙箱都有一个安全的 URL，并且支持 HTTPS，用于分享和反馈。
至于与代码沙箱的写作，可以与同事在线工作，与他们聊天，并控制谁可以进行编辑或观看代码。
还有许多其他功能，比如：
至于价格，Codesandbox Pro 版本的价格为 9 美元，其中包括私有 GitHub 存储库和无限个私有沙箱。
Playcode 只是一个简单的工具，用于快速构建原型和查看编码结果。该工具具有典型的三窗口布局：代码编辑器、控制台和结果视图。该产品有一个基本的文件结构，但没有版本控制和其他 IDE 特性。
它只支持 Javascript，HTML 和 CSS。还有一个选项可以选择编辑器样式、字体大小和其他文本编辑功能。
代码编辑器可能是在线代码编辑器市场上最流行的工具。这个平台在某种程度上已经开始发展成为社交网络，类似于 Pinterest。工程师可以在平台上分享他们的最佳实践和标识，并获得社区的认可。
该工具内部有完善的搜索功能。可以发现感兴趣的模板、项目、代码片段和主题。 Codepen 的最大特色是学习和发现新技术和最佳实践。浏览、工作和使用 Pens 是了解它们是如何构建和代码如何工作的一个很好的方式。
另一个有趣的细节——代码的演示模式。在会议、聚会和讲台上非常有用。
显著特点:
价格从每月 8 美元到 26 美元不等，还有免费的限量版。
Stackblitz 与完整的 IDE 非常相似，该工具是基于 VS 代码构建的。该产品具有广泛的特性，可以启动并继续开发完整的全堆栈应用程序。该工具由许多开发人员所熟悉的 Visual Studio Code 提供支持。
它会自动处理安装依赖项、编译、捆绑和热重载。
导入库对于 web 开发至关重要，所以 StackBlitz 包含了一个内置浏览器 npm 客户端，它支持一次安装多个软件包和特定的版本。
该项目的杀手级功能是离线编辑。Stackblitz 开发了一个浏览器内的网络服务器来实现这一点。通过 Stackblitz，您可以在单独的窗口中预览和编辑，这与其他项目中的 iframe 或小窗口相比是非常棒的。
其他值得注意的特性包括与 Github 连接以导入/导出项目，与 Google Firebase 集成以创建全堆栈项目，以及像 ZIP 文件那样下载项目。
Codeanywhere 伪装为 Web 浏览器和移动设备中的完整 IDE。
Codeanywhere 可以很容易地用 Javascript、PHP、HTML 和其他 72 种语言为您的项目建立自己的定制开发环境。
显而易见的主要特性是 Codeanywhere 可以连接任何东西，代码可以驻留在 FTP 服务器或者其他 Github 源代码上，但是你可以将它与 Codeanywhere 连接并开始编辑和开发。
在编辑器模式下，可以使用以下特性:
此外，您可以发挥布局和颜色的编辑器的修改。该工具有自己的内置终端。您还可以与任何开发人员共享整个项目、文件或文件夹。每个共享都可以有自己独特的权限。
Codeanywhere 包含一个实用的差异特性，允许您查看修订之间的差异，甚至允许您恢复到以前的代码状态。还有与 git 知识库和工具的深度集成，这些工具可以简化开发操作过程。这个产品适合那些想要移动到云端并永远留在那里的开发者。
JSfiddle 是一个简单而又非常流行、快速和高效的在线代码编辑器。该工具允许您快速共享代码，并可视化查看结果，StackOverflow 与它集成在一起。 在视觉上，与大多数竞争者一样，该界面分为 4 个块：一个用于编写代码的块、一个用于编辑 CSS、SCSS 或 sass 的代码，一个用于 HTML 布局的块以及一个具有可见工作结果的块。
代码编辑块支持以下语言:
还可以在此块中更改各种设置，如加载类型、框架类型和框架属性。这个工具还有非常好和完整的文档，以及一个开发的社区，它可以投票决定哪些特性将首先被开发接受。
使用 Vue、Jquery、React + JSX 和其他语言编写的一些流行样板文件也促进了开发。至于缺点，JSfiddle 只用于前端工作。它不支持文件和文件夹的概念，也没有办法构建 CI/CD 管道。
一般来说，这是测试新框架最合乎逻辑和最酷的选择之一，在新产品的文章和演示中演示代码。
此代码编辑器只适用于编辑 HTML，完全免费使用。值得注意的功能包括:
Repl.it 是最强大的在线开发工具之一。该产品支持多种语言和框架，包括现代流行的 Haskell、Kotlin 和著名的 Javascript、C++、Ruby 等。
主页开始于语言搜索，然后提供选择以下类别之一：Web 开发，游戏开发等。然后，您需要选择语言并创建代表。
即使在免费版本中，您也可以创建文件结构、控制版本和安装包。在设置中，您可以编辑布局、主题、字体大小和缩进大小。共享选项包括嵌入链接、普通链接、与 dev.to 社区集成。还有一个叫做'对话'的社交媒体功能，开发者可以在这里分享收到的反馈和代码。还有一个很大的功能叫做教室，在这里你可以创建教室，邀请学生并追踪进度。
Repl 已被 Facebook、MIT、Google 等公司和组织使用。
价格从免费到每月 7 美元不等，包括私人代表，无限存储空间和更快的速度。
Jsoneditoronline 是一个基于 web 的工具，用于查看、编辑和格式化 JSON。它在一个清晰的、可编辑的树形视图或代码编辑器中并排显示数据。您可以在本地或云中存储文档。
您还可以使用链接共享文档，将 JSON 文件视为普通代码或树，进行查询，当然，还可以在本地保存文件。这是在任何设备上都不使用设置和文本编辑器编辑 JSON 文件的一个很好的选择。
Codeply: 市场上又一个快速编辑 Javascript 及其框架的工具。该产品最初于 2014 年发布，2019 年发布了第二版。
可以让你编辑 angular、react、Vue、HTML 引导程序和纯 Javascript。该公司背后的团队表示，该产品适用于快速原型设计，创建模型，学习和探索新的流行库、API、插件和框架。
标准功能集包括布局设置、结果预览、现成模板和社交网络元素。与其他工具相比，速度相当独特。
Gitpod 旨在保持代码始终处于测试状态并保持最新状态。它与 Github 紧密集成：每次更新代码时，它都会运行测试。
该产品具有 VScode 接口，并支持所有主要的后端/前端语言和框架（如 Django、Rails、Revel 等）。
Plunker 是一个在线社区，用于创建，协作和共享 Web 开发想法。
Plunker 的核心功能是速度。尽管复杂，但 Plunker 编辑器的设计目的是在 2 秒内加载。
显著特点:
这些是最可行的在线代码编辑器和在线运行的 IDE。在某些情况下，使用在线 IDE/代码编辑器是自然而然的，但是要小心——不要在在线代码编辑器上启动一个庞大的项目。
此总结中没有包括完全专注于面试或没有足够功能被称为完整产品的在线代码编辑器。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online
