9个最佳Web应用程序在线代码编辑器 _应用程序

本文概述

JSFiddle
CodeSandbox
CodeAnywhere
StackBlitz
AWS Cloud9
CodeEnvy
Gitpod
Theia
Coder

接下来要编码的是什么？代码编辑器, 当然！
代码编辑器是引起程序员大战的第二个最重要的原因(第一个是代码格式化)。
在某些人看来, Vim是有史以来唯一明智的编辑器, 而在另一些人看来, 所有不适合Inception之类的Emacs螺旋式令人头晕的世界都只适合嘲笑。如果你急需关注, 那么你需要做的就是去编程社区, 然后启动一个线程, 例如” 为什么我认为X(最好选择流行的代码编辑器)很烂/是最好的” , 然后喝点啤酒放松一下。
争论, 反争论和侮辱将持续一整夜, 直到整个讨论过程不断涌现, 而且要花很多个月才能使话题中的毒液逐渐消退。
问题是：为什么？

文章图片
当然, 人类可以从一切中做出很大贡献, 但是我认为代码编辑器对于程序员来说尤其重要。一个典型的程序员几乎将所有时间都花在选择的代码编辑器上(如果我敢打赌的话, 超过98％)。他们知道编辑器周围的方式-它的优点, 缺点, 限制, 怪癖和隐藏的瑰宝。
编写代码时, 不必与编辑器打交道, 这比让你感到沮丧更令人沮丧(想想当你必须在新键盘上发出冗长而紧急的电子邮件时, 这会多么令人讨厌！)。代码编辑器减少了精神上的磨擦, 使你的工作效率更高, 这就是为什么它们如此重要并得到如此多的关注。
那么, 哪个是最好的代码编辑器？
老实说, 我什至不敢去那里！ ????

文章图片
但是, 如果你正在从事Web开发, 那么我希望你可以考虑使用另一种方法-在线代码编辑器！
简而言之, 这些编辑器完全位于远程服务器上, 并且可以通过浏览器访问。
听起来很怪吧？
3-4年前遇到他们时, 我也感到如此。为什么在地狱中有人要把所有东西都交给一个愚蠢的浏览器？
它甚至可以与本地安装的代码编辑器竞争吗？
事实证明, 在大多数情况下, 尤其是对于Web开发, 答案是肯定的。现在, 虽然我没有将在线编辑器作为主要媒介, 但我发现自己在特定情况下越来越多地使用它们。
在深入探讨哪些代码编辑器可供使用之前, 让我们先停下来思考一下什么时候在线代码编辑器才有意义。
调零
我不认识你, 但是我不希望自己喜欢的编辑器适应新系统。插件, 主题, 字体, 快捷方式, 摘要, 设置。。。在整个事情变得可用之前, 有无数的事情必须平衡。忽略某些内容很容易, 但以后在工作流程中断时会很烦。
相比之下, 完成第一个设置后, 在线编辑器将与你无关。官方构建, 更新, 每晚构建, 受支持的平台, 系统架构, FTP同步, CI / CD管道-只要你使用浏览器, 这些都没有关系！

文章图片
合作
通常, 在解决问题或调试某些东西时, 你需要与其他开发人员合作。
传统的代码编辑器不是为此目的而构建的-没有同时进行代码编辑, 注释或突出显示的范围, 因此添加对它的支持具有挑战性。

文章图片
资料安全
现在, 假设没有项目是没有版本控制的, 这意味着代码副本始终存在于存储库中。也就是说, 有时候版本控制还不够：

你忘记了推送新创建的提交, 笔记本电脑着火了。
你还有其他重要的文件和数据转储, 你的代码与之交互, 尽管这些文件和数据转储不是实时应用程序的一部分。如果你的笔记本电脑着火了, 他们会怎么办？

(好吧, 好像我迷上了笔记本着火了, 但你明白了, 对吧？！)

文章图片
加强纪律
开发商权利法院也可能会对此提出反对(如果存在这种情况), 但事实是, 开发商很少出于共同利益牺牲自己的想法。
例如, 铁杆Sublime Text发烧友将完全拥抱JetBrains的任何优秀编辑, 并会找到一切机会指出其内存需求大和性能慢的问题。
制表符与空格(甚至是两个空格的制表符与四个空格的制表符)也一样—如果你认为团队中的程序员不会锁定号角, 你会很天真。

文章图片
在这种情况下, 在线编辑器可谓是无价之宝-你可以确定项目的设置(甚至是代码的格式), 并且它只会拒绝接受工作, 直到遵循所有标准。对个人严苛, 也许对项目很有用！
到目前为止, 我的用例已经用完了, 所以让我们来谈谈在在线代码编辑器(尤其是Web开发)方面我们有什么选择。
JSFiddle 尽管JSFiddle不能替代功能强大的文本编辑器, 但它在处理一次性前端脚本方面做得非常出色。
如此流行, Q＆A网站(例如StackOverflow)已经支持直接在其平台中嵌入JSFiddle链接。

文章图片
为了快速起步, JSFiddle在开始时提供了一些样板。这意味着, 如果你想启动一个演示, 例如React, 你需要做的就是单击相关按钮并开始编写代码。按下” 保存” 后, “ 小提琴” 将被保存, 你将获得一个永久URL(查看我创建的这个愚蠢的小提琴：https：//jsfiddle.net/tuqd76c4/, 请注意, 你可以进行更改, 然后按” 保存” 以创建一个新的此网址的版本)。
这就是使JSFiddle成为前端Web开发的可行平台的原因：

免费使用(无任何隐藏费用或免费增值功能)。 JSFiddle通过广告来支持自己(至少在撰写本文时), 并且你可以在上面的屏幕截图的左下方看到一个Adobe广告。
代码协作功能-非常适合一起构建概念, 进行访谈等。
多种布局, 字体大小, 浅色/深色主题等。
代码格式化(整理), 即将支持linters(CSS和JS)等。

现在, 抽泣, 抽泣, 为坏的事情：

JSFiddle是纯前端编辑器。无法编码和运行你喜欢的后端语言。
这里没有文件和文件夹的概念(或上传)。你所拥有的只是一个单一的代码空间, 无论它有多少。
JSFiddle不能用于在服务器上托管代码。该代码必须在JSFiddle上并且始终是公开的。
无法建立CI / CD管道, 使用Git等。

就是说, JSFiddle有它的优点, 当你需要提出概念证明并以光速协作时, 它会闪耀。它一直是在线编辑者的主要身份。
CodeSandbox 可以认为CodeSandbox是JSFiddle上功能更强大, 更完整的功能。顾名思义, CodeSandbox为前端开发提供了完整的代码编辑器体验和沙盒环境。

文章图片
CodeSandbox是真正的强大产品, 是甜美, 甜美的产品。如果我尝试列出其所有优势, 我会用光纸本, 但以下是一些杀手features的功能：

Npm支持：是的, 你几乎可以添加npm上可用的任何软件包。
文件, 文件夹, 模块：你可以将代码分成多个文件, 从公用文件夹中添加/删除图像, 以及根据需要构建/导入模块。该工作流程与现代模块捆绑器的工作流程相同, 因此你无需(几乎)进行任何设置。
支持TypeScript, 热重载, GitHub导出, 静态文件托管等。
它建立在摩纳哥编辑器的基础上, 与喜欢的VSCode编辑器相同。这带来了强大的功能, 例如” 转到” , “ 查找参考” 以及必要的重构！
对Emmet的代码段支持
集成的DevTools, 插入, 错误覆盖, 测试框架(Jest), 键绑定等。
直接将本地项目导入CodeSandbox的强大CLI。

虽然免费版本的CodeSandbox不支持私人代码, 但你可以通过在Patreon上以每月5美元(按需支付, 每月最多50美元)的价格帮助他们, 来获得该功能(并总体上增加大小限制)。
CodeAnywhere 此列表中的大多数代码编辑器(至少到目前为止)存在的一个问题是, 他们希望你始终将代码保留在其服务器上, 或者要求你定期通过命令行同步代码。
CodeAnywhere并非如此。

文章图片
在最强大的方面, CodeAnywhere具有两个对我而言突出的功能：

用于72种以上编程语言和框架的预构建容器映像。这意味着你可以直接在编辑器中配置新的开发环境！当然, 该代码会自动托管在新创建的容器中, 并从那里直接提供文件。
连接任何东西。是的, 什么都可以。你没有义务将代码存储在CodeAnywhere的服务器上。无论你的代码驻留在FTP, Dropbox, Amazon S3之类的文件共享平台上还是GitHub之类的复杂版本控制平台上, 你都可以使用纯粹用于的代码编辑器轻松设置CodeAnywhere来读写该源。。。好吧, 代码编辑。 ????

我想指出的另一件事是：如果你在查看历史记录和差异时对Git不满意, CodeAnywhere可能会让你感到宽慰。编辑器使用其diff系统来比较文件, 该系统可让你比较任意两个修订版中的两个文件(每次保存文件时都会创建一个修订版)。

文章图片
不过, 修订版本有一些不足之处-免费版本仅允许你维护一个修订版本, 而最小的付费计划最多只能包含20个修订版本。通常来说, 这不是问题, 因为你很少希望超越最新的20版, 但是由于大多数程序员习惯每分钟点击几次Save, 这可能会很痛苦。
综上所述, CodeAnywhere对于想要迁移到云中并停留在云中的人来说, 是一个坚实而愉快的产品。 ????由于我认为它的功能超出了前端代码, 因此强烈建议使用它！
StackBlitz 如果你大多是前端用户, 并且无法离开VSCode界面, 那么StackBlitz就是为你创建的。

文章图片
没什么特别的吗？直到向下滚动一点并单击” 角度” 按钮, 我才知道。繁荣！

文章图片
猜猜是不是故意创建类似于VSCode的内容-它是基于VSCode编辑器构建的！如此之多, 你就可以按照常规VSCode实例所希望的方式安装扩展程序, 搜索文件夹并组织文件。
但是, 等等, 还有更多！
你可能注意到, 也可能没有注意到：

在StackBlitz上创建的所有应用程序也将自动部署在其服务器上！因此, 我刚刚创建的这个Angular玩具应用会自动托管在https://angular-yvyi2j.stackblitz.io/上。该网址很可能仍在工作(不过, 如免费托管一样, 加载速度会很慢)！
你可以分叉并共享项目。共享时, 你可以更好地控制他人的工作。
你可以连接到GitHub存储库, 还可以直接从那里拉/推代码。或者, 你也可以简单地以zip文件格式下载项目。

但是, 等等, 还有更多！
认真！ ????
以下是StackBlitz提供的官方功能列表：

对Firebase的本地支持(这不是我个人使用的功能, 但是, 嘿, 对于那些不愿涉足后端深处的人来说, 这是一个福音。)
Intellisense, 项目搜索
键入时进行热装
导入npm软件包
未连接时离线编辑！

在摆脱Web开发和部署的障碍时, StackBlitz充满了(美丽的)惊喜。将VSCode嵌入你的网站已不再是梦想！
AWS Cloud9 可以说Cloud9是第一个基于浏览器的IDE, 它提供了重要的功能, 并把浏览器作为编辑器成为主流。难怪亚马逊后来收购了它, 如今, Cloud9已成为AWS产品的一部分。

文章图片
如果你甚至是远程连接到AWS平台(或对AWS平台感兴趣), Cloud9也是你寻找完美(好的, 近乎完美)编辑器的地方。让我们看看原因：

使用Cloud9不收取任何额外费用。你可以将Cloud9连接到现有/新的AWS计算实例, 并且仅需为该实例付费。也可以通过SSH连接到第三方服务器-完全免费！ ????
对无服务器AWS应用程序的一流支持(调试等)
从编辑器内部直接对AWS进行终端访问(老实说, 在VSCode中我仍然想念一个不错的编辑器, 选项卡式终端)
支持40多种编程语言(Go, C ++, Ruby, Node, Python, PHP, Java … 选择)

Cloud9中的协作功能也是理想的, 它允许无缝地进行评论/采访。

文章图片
另一个杀手级功能是对文件所做更改的视频式回放, 使检查过程充满乐趣：

文章图片
我的建议？
如果你正在使用AWS, 那么不要等待, 现在就去抢Cloud9。而且, 如果你还不在云中, 但一直在考虑采取行动, 请使用AWS并将Cloud9集成到你的工作流程中。无论哪种方式, 你都无法做出更好的决定！
CodeEnvy 【9个最佳Web应用程序在线代码编辑器】CodeEnvy是一个功能强大的云编辑器, 它利用Docker容器来运行预配置和隔离的开发环境。它基于开源Eclipse Che cloud IDE构建, 并提供了大量的可扩展性和DevOps选项。
在撰写本文时, CodeEnvy已被RedHat收购(有趣的是, 其本身已被Oracle收购！)。

文章图片
Gitpod Gitpod是对云代码编辑器(或IDE, 如果愿意的话)的一种崭新尝试, 旨在使你的代码始终经过测试并保持最新。换句话说, 它与GitHub紧密集成, 并且每次添加代码时, 它都会运行测试和CI / CD管道, 以确保代码始终处于100％健康状态。
值得一试的是, 如果你喜欢VSCode体验, 并且想要支持所有主要后端/前端语言和框架(Django, Rails, Revel, 你为其命名)的东西。

文章图片
Theia 如果你是顽固的SOLID粉丝和挑剔的软件架构师, 那么Theia IDE将为你解决问题分离的问题。它是TypeScript编码的(五个点, 风格直截了当！)IDE, 具有完全独立的前端和后端。前端在浏览器中运行, 而后端则可以在任何地方-本地计算机或云！
但这还不是全部-前端可以作为具有完整功能的隔离浏览器环境的Electron应用程序运行, 如果你渴望的话, 可以为你提供本机桌面应用程序的外观。

文章图片
Coder 尽管他们的网站说不清楚, 但Coder是捆绑在服务器中的VSCode环境, 可以在本地或云中运行。推荐的配置是将IDE作为云中的服务器运行, 并通过浏览器在本地访问它。有针对零麻烦设置的预构建Docker映像, 如果你需要支持或有不同的需求, 则可以制定企业计划。

文章图片
总结
撰写本文时, 它或多或少涵盖了所有的IDE和代码编辑器。在此列表中, 我遗漏了两种类型的产品：那些只专注于面试且没有成熟环境的产品(当然, 除了我们钟爱的经典JSFiddle之外), 以及那些似乎没有提供产品的产品。充实, 只有一个光滑的主页。
如果你认为有事可做, 请告诉我, 我们将感激不尽！ ????