关于开发者:回顾-12-个面向-Web-开发人员的在线代码编辑器

什么是在线代码编辑器？

在线代码编辑器是驻留在近程服务器上的工具，能够通过浏览器拜访。

一些在线代码编辑器具备与文本编辑器更类似的根本个性，而另一些则像残缺的集成开发环境 (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/ 代码编辑器是自然而然的，然而要小心——不要在在线代码编辑器上启动一个宏大的我的项目。

此总结中没有包含齐全专一于面试或没有足够性能被称为残缺产品的在线代码编辑器。