面向 Web 开发人员的 7 个最佳基于浏览器的在线代码编辑器

如果您是一名 Web 开发人员，您很可能在您的工作站上本地设置了一个开发环境。 你已经安装了你最喜欢的代码编辑器，添加了最好的包，加载了扩展，整个 IDE 完全按照你的需要工作。 但是，如果您不在普通机器上呢？ 如果您正在旅行或流离失所，甚至在没有笔记本电脑的情况下在家工作怎么办？ 然后怎样呢？ 那时知道什么在线代码编辑器可以真正节省一天的时间。 更重要的是，甚至可以放在你的后口袋里，作为增强你正常编码程序的一种方式。

订阅我们的 YouTube 频道

为什么选择在线代码编辑器？

考虑使用在线代码编辑器有几个原因。 然而，事实是使用在线 IDE（很可能）不会取代您本地安装的 IDE。 虽然许多在线环境非常强大并且能够处理您交给它们的大部分工作，但它们并不像桌面安装那样强大和强大。 尽管如此，考虑使用一个的原因有很多。

• 您正在旅行，需要随时随地访问您的代码。
• 您需要共享代码片段和交互式代码段。
• 您的时间有限，您需要一个几乎为零设置的解决方案。
• 您的预算有限。 在线代码编辑器可能比您可以访问的工作站拥有更多的功能。
• 您的团队需要实时协作。 许多在线 IDE 都内置了协作工具，无需设置即可工作。

无论您为什么想要或需要使用在线 IDE，都有很多可供您选择，每种都有不同的优点和缺点，并为 Web 开发人员提供不同的功能。

1. 游戏代码

PlayCode 是一款不错的多用途在线代码编辑器。 使用它，您可以打开在单个项目中一起运行的多个文件，就像使用 Sublime Text 或 VS Code 在典型目录结构中打开多个文件一样。 PlayCode 为用户提供了预制模板，以及浏览器中的实时结果和内置控制台调试。 用户无需登录即可编辑和工作以进行快速修复等，还可以登录以保存工作并跨机器使用 PlayCode。

更多信息

2.JSFiddle

JSFiddle 是另一个顶级的在线代码编辑器，可以像 PlayCode 一样以多种方式工作。 JSFiddle 专为 JavaScript 编码人员设计，不一定适用于整个项目，但正如编辑器顶部的信息栏本身所说，它最适合“文档演示、Github 问题的错误报告、在堆栈溢出、实时代码协作、代码片段托管”或只是一个沙箱，供您玩弄代码。

更多信息

3.代码笔

CodePen很可能被认为是在线代码编辑器的在线代码编辑器。 它不仅为您提供了用于协作、实验和共享的工具，而且您还可以获得实时结果并能够搜索他们的数据库和其他作者提供的片段存储库，以便您也可以进行实验并从他们的工作中学习. 这也是一个有趣的地方，可以看到一些人以新的和有趣的方式处理代码。 此外，CodePen 片段会被 Google 编入索引，而且很多时候，当您在前往 Stack Overflow 之前寻找解决方案时，您最终会在这里找到解决方案——有时在此之后，因为人们经常在那里编写和分享实时解决方案。

更多信息

4. StackBlitz

StackBlitz 是个好东西。 这款应用程序为开发人员提供的功能给我们留下了深刻的印象，因为它配备了大量工具，可让您从一个运行开始就开始您的项目。 只需单击一下。 如果您查看上图，您会发现文件和依赖项甚至可共享的 URL 都是通过一个Start a New Workspace – React (JavaScript)按钮生成的。 StackBlitz 能够保存、共享甚至连接到您的 GitHub 帐户，值得一看。 StackBlitz 不是代码片段共享服务或编码沙箱，而是适合喜欢在线代码编辑器的人的可靠 IDE。

另外，我们不能不说，它是基于 VS Code 的。 因此，您基本上是在浏览器中运行最流行的 IDE 和代码编辑器，并且每个项目都有自己的服务器空间。 您可以根据需要升级，但即使是免费版本也能正常运行（尽管加载速度稍慢，但这是免费计划的预期）。 仔细阅读它，我们认为您会同意，在所有在线代码编辑器中，这值得花很长时间认真研究。

更多信息

5.AWS云9

作为 Cloud9 的早期采用者，当时它是c9.io上的一个开源项目，我们强烈推荐该产品。 事实上，它提供了与上面的 StackBlitz 非常相似的体验。 当亚马逊收购 C9 时，他们将其连接到他们的云，作为其 AWS 服务套件的一部分。 AWS Cloud9 绝对是一个可靠的、功能齐全的在线 IDE，他们网站上的信息简介很好地分解了为什么值得一看。

AWS Cloud9 是一个基于云的集成开发环境 (IDE)，让您只需一个浏览器即可编写、运行和调试代码。 它包括代码编辑器、调试器和终端。 Cloud9 预装了适用于流行编程语言（包括 JavaScript、Python、PHP 等）的基本工具，因此您无需安装文件或配置开发机器即可启动新项目。 由于您的 Cloud9 IDE 是基于云的，因此您可以在办公室、家中或任何地方使用连接互联网的机器处理您的项目。 Cloud9 还为开发无服务器应用程序提供了无缝体验，使您能够轻松定义资源、调试以及在无服务器应用程序的本地和远程执行之间切换。 使用 Cloud9，您可以快速与您的团队共享您的开发环境，使您能够实时配对编程和跟踪彼此的输入。

更多信息

6.JSBin

如果您曾经见过或使用过 PasteBin，那么 JSBin 会很熟悉。 JSBin在结构、风格和实用性上都相似，主要是一个共享代码的站点。 我们认为最好在这里注册一个帐户以保持登录状态。原因是，JSBin 会自动保存您正在使用的任何代码的进度。 即使您只是想看看代码片段的作用，您也不会丢失您的工作。 JSBin 是一个简单的、严肃的编辑器。 如果这就是你所需要的，你真的不能变得更好了。

更多信息

7. WordPress 主题编辑器

关于在线代码编辑器，WordPress 可能不是您想到的第一件事。 但这绝对是需要考虑的事情。 在 WordPress 4.9 中，WP Core 更新为包含 CodeMirror。 对代码区域内所做的任何更改的语法突出显示和错误警告现在是 WordPress 的基线。 其主要位置在外观 – 主题编辑器区域内，但它也出现在任何小部件化区域（例如自定义 HTML小部件）或自定义 CSS选项卡中的主题定制器中。 虽然这绝对不是一个完整的 IDE，但我们绝对可以推荐 WP CodeMirror 编辑器作为一种检查错误和更新代码片段的方式，而无需处理 FTP 和各种文件管理系统。

更多信息

结束与在线代码编辑器

大多数在线代码编辑器不会取代您的本地开发环境。 那不是他们的工作。 大多。 然而，他们可以做的是提供一种可靠而简单的方式来实时编辑代码、共享片段、进行备份以及在安全可靠的位置试验新功能。 在像 StackBlitz 这样的完整 IDE、像 JSBin 这样的片段共享服务，甚至像 WordPress CodeMirror 集成这样的生活质量在线代码编辑器之间，如果您从未玩过在线编辑，那么现在是开始的最佳时机。

您最喜欢的在线代码编辑器是什么？

Fernandodiass/shutterstock.com 的文章特色图片