个性化阅读
专注于IT技术分析

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

本文概述

接下来要编码的是什么?代码编辑器, 当然!

代码编辑器是引起程序员大战的第二个最重要的原因(第一个是代码格式化)。

在某些人看来, Vim是有史以来唯一明智的编辑器, 而在另一些人看来, 所有不适合Inception之类的Emacs螺旋式令人头晕的世界都只适合嘲笑。如果你急需关注, 那么你需要做的就是去编程社区, 然后启动一个线程, 例如”为什么我认为X(最好选择流行的代码编辑器)很烂/是最好的”, 然后喝点啤酒放松一下。

争论, 反争论和侮辱将持续一整夜, 直到整个讨论过程不断涌现, 而且要花很多个月才能使话题中的毒液逐渐消退。

问题是:为什么?

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

当然, 人类可以从一切中做出很大贡献, 但是我认为代码编辑器对于程序员来说尤其重要。一个典型的程序员几乎将所有时间都花在选择的代码编辑器上(如果我敢打赌的话, 超过98%)。他们知道编辑器周围的方式-它的优点, 缺点, 限制, 怪癖和隐藏的瑰宝。

编写代码时, 不必与编辑器打交道, 这比让你感到沮丧更令人沮丧(想想当你必须在新键盘上发出冗长而紧急的电子邮件时, 这会多么令人讨厌!)。代码编辑器减少了精神上的磨擦, 使你的工作效率更高, 这就是为什么它们如此重要并得到如此多的关注。

那么, 哪个是最好的代码编辑器?

老实说, 我什至不敢去那里! ????

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

但是, 如果你正在从事Web开发, 那么我希望你可以考虑使用另一种方法-在线代码编辑器!

简而言之, 这些编辑器完全位于远程服务器上, 并且可以通过浏览器访问。

听起来很怪吧?

3-4年前遇到他们时, 我也感到如此。为什么在地狱中有人要把所有东西都交给一个愚蠢的浏览器?

它甚至可以与本地安装的代码编辑器竞争吗?

事实证明, 在大多数情况下, 尤其是对于Web开发, 答案是肯定的。现在, 虽然我没有将在线编辑器作为主要媒介, 但我发现自己在特定情况下越来越多地使用它们。

在深入探讨哪些代码编辑器可供使用之前, 让我们先停下来思考一下什么时候在线代码编辑器才有意义。

调零

我不认识你, 但是我不希望自己喜欢的编辑器适应新系统。插件, 主题, 字体, 快捷方式, 摘要, 设置。 。 。在整个事情变得可用之前, 有无数的事情必须平衡。忽略某些内容很容易, 但以后在工作流程中断时会很烦。

相比之下, 完成第一个设置后, 在线编辑器将与你无关。官方构建, 更新, 每晚构建, 受支持的平台, 系统架构, FTP同步, CI / CD管道-只要你使用浏览器, 这些都没有关系!

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

合作

通常, 在解决问题或调试某些东西时, 你需要与其他开发人员合作。

传统的代码编辑器不是为此目的而构建的-没有同时进行代码编辑, 注释或突出显示的范围, 因此添加对它的支持具有挑战性。

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

资料安全

现在, 假设没有项目是没有版本控制的, 这意味着代码副本始终存在于存储库中。也就是说, 有时候版本控制还不够:

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

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

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

加强纪律

开发商权利法院也可能会对此提出反对(如果存在这种情况), 但事实是, 开发商很少出于共同利益牺牲自己的想法。

例如, 铁杆Sublime Text发烧友将完全拥抱JetBrains的任何优秀编辑, 并会找到一切机会指出其内存需求大和性能慢的问题。

制表符与空格(甚至是两个空格的制表符与四个空格的制表符)也一样—如果你认为团队中的程序员不会锁定号角, 你会很天真。

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

在这种情况下, 在线编辑器可谓是无价之宝-你可以确定项目的设置(甚至是代码的格式), 并且它只会拒绝接受工作, 直到遵循所有标准。对个人严苛, 也许对项目很有用!

到目前为止, 我的用例已经用完了, 所以让我们来谈谈在在线代码编辑器(尤其是Web开发)方面我们有什么选择。

JSFiddle

尽管JSFiddle不能替代功能强大的文本编辑器, 但它在处理一次性前端脚本方面做得非常出色。

如此流行, Q&A网站(例如StackOverflow)已经支持直接在其平台中嵌入JSFiddle链接。

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

为了快速起步, 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为前端开发提供了完整的代码编辑器体验和沙盒环境。

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

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

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

虽然免费版本的CodeSandbox不支持私人代码, 但你可以通过在Patreon上以每月5美元(按需支付, 每月最多50美元)的价格帮助他们, 来获得该功能(并总体上增加大小限制)。

CodeAnywhere

此列表中的大多数代码编辑器(至少到目前为止)存在的一个问题是, 他们希望你始终将代码保留在其服务器上, 或者要求你定期通过命令行同步代码。

CodeAnywhere并非如此。

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

在最强大的方面, CodeAnywhere具有两个对我而言突出的功能:

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

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

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

不过, 修订版本有一些不足之处-免费版本仅允许你维护一个修订版本, 而最小的付费计划最多只能包含20个修订版本。通常来说, 这不是问题, 因为你很少希望超越最新的20版, 但是由于大多数程序员习惯每分钟点击几次Save, 这可能会很痛苦。

综上所述, CodeAnywhere对于想要迁移到云中并停留在云中的人来说, 是一个坚实而愉快的产品。 ????由于我认为它的功能超出了前端代码, 因此强烈建议使用它!

StackBlitz

如果你大多是前端用户, 并且无法离开VSCode界面, 那么StackBlitz就是为你创建的。

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

没什么特别的吗?直到向下滚动一点并单击”角度”按钮, 我才知道。繁荣!

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

猜猜是不是故意创建类似于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产品的一部分。

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

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

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

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

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

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

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

我的建议?

如果你正在使用AWS, 那么不要等待, 现在就去抢Cloud9。而且, 如果你还不在云中, 但一直在考虑采取行动, 请使用AWS并将Cloud9集成到你的工作流程中。无论哪种方式, 你都无法做出更好的决定!

CodeEnvy

CodeEnvy是一个功能强大的云编辑器, 它利用Docker容器来运行预配置和隔离的开发环境。它基于开源Eclipse Che cloud IDE构建, 并提供了大量的可扩展性和DevOps选项。

在撰写本文时, CodeEnvy已被RedHat收购(有趣的是, 其本身已被Oracle收购!)。

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

Gitpod

Gitpod是对云代码编辑器(或IDE, 如果愿意的话)的一种崭新尝试, 旨在使你的代码始终经过测试并保持最新。换句话说, 它与GitHub紧密集成, 并且每次添加代码时, 它都会运行测试和CI / CD管道, 以确保代码始终处于100%健康状态。

值得一试的是, 如果你喜欢VSCode体验, 并且想要支持所有主要后端/前端语言和框架(Django, Rails, Revel, 你为其命名)的东西。

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

Theia

如果你是顽固的SOLID粉丝和挑剔的软件架构师, 那么Theia IDE将为你解决问题分离的问题。它是TypeScript编码的(五个点, 风格直截了当!)IDE, 具有完全独立的前端和后端。前端在浏览器中运行, 而后端则可以在任何地方-本地计算机或云!

但这还不是全部-前端可以作为具有完整功能的隔离浏览器环境的Electron应用程序运行, 如果你渴望的话, 可以为你提供本机桌面应用程序的外观。

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

Coder

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

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

总结

撰写本文时, 它或多或少涵盖了所有的IDE和代码编辑器。在此列表中, 我遗漏了两种类型的产品:那些只专注于面试且没有成熟环境的产品(当然, 除了我们钟爱的经典JSFiddle之外), 以及那些似乎没有提供产品的产品。充实, 只有一个光滑的主页。

如果你认为有事可做, 请告诉我, 我们将感激不尽! ????

赞(0)
未经允许不得转载:srcmini » 9个最佳Web应用程序在线代码编辑器

评论 抢沙发

评论前必须登录!