代码编辑器：程序员的第二重要工具
在编程世界中，除了代码本身，还有什么更重要的呢？答案无疑是代码编辑器！
代码编辑器对于程序员的重要性仅次于代码格式化，它们是程序员日常工作中不可或缺的工具。
不同的人对代码编辑器有不同的偏好。有人认为Vim是最佳选择，而另一些人则认为Emacs才是真正的王者，任何不适合Emacs的编辑器都应该被嘲笑。如果你想引发一场激烈的讨论，只需在编程论坛上发起一个话题，比如“为什么我认为X（任何一款流行的代码编辑器）很糟糕/是最好的”，然后就可以坐下来，准备好欣赏一场激烈的辩论。
各种争论、反驳和嘲讽会持续一整晚，甚至需要几个月的时间才能让论坛上的火药味消散。
问题是：为什么会有如此激烈的争论呢？
虽然人们常常会为各种事情争论不休，但代码编辑器对于程序员来说显得尤为特别。 程序员几乎所有的时间（超过98%的时间，我相信）都花费在使用他们选择的代码编辑器上。他们对编辑器了如指掌，包括它的优点、缺点、局限性、怪癖和隐藏的技巧。
没有什么比在编写代码时不得不与编辑器作斗争更令人沮丧的了。就像你不得不使用一个不熟悉的键盘来发送一封冗长而紧急的电子邮件一样令人烦躁。一个好的代码编辑器可以减少精神负担，提高效率，这就是为什么它们如此重要并受到如此多关注的原因。
那么，哪个是最好的代码编辑器呢？
老实说，我不敢妄下定论！ 😀 😀
但是，如果你从事Web开发，我希望你考虑另一种选择——在线代码编辑器！你也可以称它们为基于云的代码编辑器。
请不要将代码编辑器与集成开发环境（IDE）混淆。两者是不同的概念，作为开发人员，你应该熟悉这些多语言IDE。
简而言之，这些编辑器完全驻留在远程服务器上，你可以通过浏览器访问它们。
听起来很奇怪，对吧？
3-4年前我第一次接触它们时也有这种感觉。为什么会有人想把所有工作都交给一个浏览器呢？
它们真的能与本地安装的代码编辑器竞争吗？
事实证明，在大多数情况下，特别是对于Web开发而言，答案是肯定的。虽然我还没有将在线编辑器作为我的主要工具，但我确实发现在某些特定场景下，我越来越频繁地使用它们。
在我们深入探讨有哪些在线代码编辑器可以使用之前，让我们先思考一下，在线代码编辑器在什么情况下才是合适的选择。
无需设置
我不知道你的情况如何，但我并不喜欢在新系统上花费时间来配置我最喜欢的编辑器。插件、主题、字体、快捷键、代码片段、各种设置，在一切就绪之前，需要调整的细节数不胜数。而且很容易遗漏一些东西，直到你的工作流程被打断时才会感到懊恼。
相比之下，在线编辑器则无需担心这些。一旦第一次设置完成，所有更新、夜间构建、支持的平台、系统架构、FTP同步、CI/CD管道等都不再是问题。只要你有一个浏览器，一切都OK！
协作
在解决问题或调试代码时，你经常需要与其他开发人员协作。
传统的代码编辑器并非为此而设计的，它们不支持实时代码编辑、注释或高亮显示。想要添加这些功能也很有挑战性。
数据安全
当然，如今几乎所有的项目都有版本控制，这意味着代码的副本始终存在于代码库中。然而，有时候版本控制并不能完全解决问题：
- 你可能忘记推送新提交的代码，结果你的笔记本电脑着火了。
- 你可能还有其他与代码相关的、重要的文件和数据，虽然它们不是实时应用程序的一部分。如果你的笔记本电脑着火，它们会怎么样？
（好吧，我似乎对笔记本电脑着火有点着迷，但你应该明白我的意思，对吧？！）
代码规范执行
这或许会在开发者权利法庭上引发争议（如果真有这样的机构），但事实是，开发者很少为了共同利益而放弃自己的偏好。
例如，Sublime Text的忠实粉丝会对任何JetBrains的编辑器不屑一顾，并且会抓住一切机会指出它们内存占用过高和性能较慢的问题。
制表符和空格的问题也一样，甚至两个空格制表符和四个空格制表符也会引发争议。如果你认为团队中的程序员不会为此争论不休，那你就太天真了。
在这种情况下，在线编辑器就成了福音。你可以为项目设定统一的设置（甚至包括代码格式化的方式），并且编辑器会拒绝接受不符合标准的任何代码。这或许对个人有点苛刻，但对项目来说却是好事！
以上就是我个人使用在线代码编辑器的理由，接下来让我们看看有哪些在线代码编辑器可供选择，特别是针对Web开发的。
JSFiddle
虽然JSFiddle不能替代成熟的文本编辑器，但它在处理一次性的前端脚本方面表现出色。
它非常受欢迎，以至于StackOverflow等问答网站已经支持直接在其平台中嵌入JSFiddle链接。
为了让你快速上手，JSFiddle提供了一些初始模板。这意味着，如果你想创建一个演示，比如使用React，你只需点击相应的按钮即可开始编写代码。一旦点击保存，“小提琴”就会被保存，并生成一个永久的URL（可以查看我创建的这个简单的例子：https://jsfiddle.net/tuqd76c4/, 请注意，你可以进行更改并保存，从而创建一个新的URL版本）。
以下是JSFiddle成为前端Web开发可行平台的原因：
- 免费使用（没有隐藏费用或增值功能）。JSFiddle通过广告来维持运营（至少在撰写本文时是这样），你可以在上面的屏幕截图的左下方看到一个Adobe广告。
- 代码协作功能——非常适合一起构建概念、进行面试等。
- 多种布局、字体大小、浅色/深色主题等。
- 代码格式化、即将推出的linter支持（CSS和JS）等等。
现在，该说说缺点了：
- JSFiddle是一个纯粹的前端编辑器。你无法编写和运行你最喜欢的后端语言。
- 这里没有文件和文件夹的概念（也不能上传文件）。你只有一个代码空间，不管它有多大。
- JSFiddle不能用于在你的服务器上托管代码。代码必须在JSFiddle上，并且是公开的。
- 没有办法构建CI/CD管道、使用Git等。
即便如此，JSFiddle也有其独特的优势。当你需要快速进行概念验证和协作时，它会大放异彩。它现在是，而且未来仍将是流行的在线编辑器之一。
CodeSandbox
CodeSandbox可以被认为是JSFiddle的更强大、更完整版本。顾名思义，CodeSandbox为前端开发提供了一个完整的代码编辑器体验和沙盒环境。
CodeSandbox是一个强大而优秀的产品。如果我试图列出它的所有优点，我可能会写不完，但这里有一些最吸引人的功能：
- NPM支持：是的，你可以添加几乎任何npm上可用的包。
- 文件、文件夹、模块：你可以将代码拆分为多个文件，从公共文件夹中添加/删除图像，构建/导入你认为合适的模块。工作流程与现代模块打包器的工作流程一致，因此你几乎不需要做任何设置。
- 支持TypeScript、热重载、GitHub导出、静态文件托管等。
- 它基于Monaco编辑器构建，该编辑器也为流行的VSCode编辑器提供动力。这为你带来了强大的功能，如“转到定义”、“查找引用”和必要的重构功能！
- 代码片段支持Emmet。
- 集成的DevTools、linting、错误覆盖、测试框架（Jest）、快捷键等等。
- 强大的CLI可以直接将本地项目导入CodeSandbox。
虽然CodeSandbox的免费版本不支持私有代码，但你可以通过支持他们来获得该功能（并增加总体限制）： Patreon，每月只需5美元（你也可以根据需要支付更多，每月最多50美元）。
CodeAnywhere
这个列表中的大多数代码编辑器（至少到目前为止）都希望你始终将代码存储在他们的服务器上，或者需要你定期通过命令行同步代码。
CodeAnywhere则不同。
CodeAnywhere最强大的功能主要体现在以下两个方面：
- 为72多种编程语言和框架预构建的容器映像。这意味着你可以直接在编辑器中配置新的开发环境！当然，代码会自动托管在新创建的容器上，并直接从那里提供文件。
- 可以连接到任何地方。是的，真的任何地方。你没有义务将代码存储在CodeAnywhere的服务器上。无论你的代码驻留在FTP、Dropbox、Amazon S3等文件共享平台，还是GitHub等复杂的版本控制平台，你都可以轻松设置CodeAnywhere来读取和写入代码，这正是代码编辑器应有的功能。
我还想指出一点：如果你对Git的历史记录和差异查看功能不满意，CodeAnywhere可能会让你松一口气。该编辑器使用其差异系统来比较文件，允许你在任何两个修订版之间比较文件（每次保存文件都会创建一个修订版）。
不过，修订版功能有一个小问题，免费版本只允许你维护一个修订版，而最低的付费计划也只允许最多20个修订版。一般来说，这不算什么问题，因为你很少需要查看最近20次修订版。但考虑到大多数程序员都有每分钟点击几次保存的习惯，这可能会让人有点恼火。
总而言之，CodeAnywhere对于那些想要迁移到云端并留在那里的人来说，是一个可靠且易用的产品。因为它能够处理前端以外的代码，我认为强烈推荐它！
StackBlitz
如果你主要从事前端开发，并且无法离开VSCode的界面，那么StackBlitz就是为你量身打造的。
看不出有什么特别之处吗？
直到我向下滚动一点并点击Angular按钮时，我才意识到它的特别之处。惊喜！
你猜怎么着？它不是故意模仿VSCode的，它直接基于VSCode编辑器构建！因此，你可以安装扩展，搜索文件夹，并以你使用常规VSCode实例的方式来组织文件。
但是，等等，还有更多！
你可能注意到了，也可能没有注意到：
- 在StackBlitz上创建的所有应用程序都会自动部署到他们的服务器上！因此，我刚刚创建的这个简单的Angular应用会自动托管在https://angular-yvyi2j.stackblitz.io/。这个URL很有可能仍然有效（不过，加载速度可能会比较慢，正如你所预料的那样）。
- 你可以fork和分享项目。分享时，你可以更好地控制其他人可以做什么。
- 你可以连接到GitHub仓库，也可以直接从那里提取/推送代码。或者，你可以简单地将项目下载为zip文件。
但是，等等，还有更多！
真的！😀
以下是StackBlitz提供的官方功能列表：
- 对Firebase的原生支持（我个人不使用它，但对于那些不想深入后端复杂领域的人来说，这很有用）。
- 智能感知，项目搜索。
- 输入时热重载。
- 导入npm包。
- 未连接时离线编辑！
在消除Web开发和部署的障碍方面，StackBlitz充满了（美好的）惊喜。将VSCode嵌入你的网站不再是梦想！
AWS Cloud9
Cloud9可以说是第一个基于浏览器的IDE，它提供了重要的功能，并将浏览器作为编辑器的想法推向了主流。难怪亚马逊后来收购了它，如今Cloud9是AWS产品的一部分。
如果你对AWS平台感兴趣，那么Cloud9是你寻找完美（好吧，接近完美）编辑器的地方。
让我们看看原因：
- 使用Cloud9无需额外费用。你可以将Cloud9连接到现有的或新的AWS计算实例，你只需为该实例付费。也可以通过SSH连接到第三方服务器——完全免费！🙂
- 对AWS无服务器应用程序的一流支持（如调试）。
- 从编辑器中直接终端访问AWS（说实话，一个很棒的编辑器，标签式终端是我在VSCode中仍然怀念的功能）。
- 支持超过40种编程语言（Go、C++、Ruby、Node、Python、PHP、Java…随你选择）。
Cloud9的协作功能也很不错，支持无缝的代码审查和面试。
另一个非常棒的功能是对文件更改进行视频式回放，这使得代码审查过程更加轻松愉快：
我的建议？
如果你对AWS感兴趣，不要犹豫，马上使用Cloud9。如果你还没有使用云服务，但正在考虑采用，那么拥抱AWS并将Cloud9集成到你的工作流程中。无论如何，这都是一个不错的选择！
Gitpod
Gitpod对云代码编辑器（或IDE，如果你喜欢的话）进行了创新性的尝试，旨在确保你的代码始终通过测试，并保持最新。换句话说，它与GitHub深度集成，每次你添加代码时，它都会运行测试和CI/CD管道，以确保代码始终处于100%健康的状态。
如果你喜欢VSCode的体验，并且需要支持所有主要的后端/前端语言和框架（Django、Rails、Revel等等），那么Gitpod值得一试。
Theia
如果你是SOLID原则的忠实拥护者，并且是吹毛求疵的软件架构师，那么Theia IDE可能会让你感到满意。它是一个使用TypeScript编写的代码IDE，具有完全独立的前端和后端。前端在浏览器中运行，后端可以在任何地方——本地机器或云端！
但这还不是全部，前端可以作为Electron应用程序运行，具有功能齐全的隔离浏览器环境。如果你需要原生桌面应用程序的外观和感觉，它可以满足你的要求。
GitHub Codespaces
GitHub Codespaces提供了高性能虚拟机来运行代码，以便你开发Web应用程序。它使用了包含编辑器和完整生态系统的Visual Studio Code，你会发现使用浏览器进行开发更加轻松。
你可以尝试项目的最新开发环境以及预构建的镜像。通过将你的虚拟机扩展到64GB的RAM和32个内核，你将体验到跨不同区域的低延迟。从标准化的环境、硬件规格、编辑器设置、扩展和运行时要求开始编写代码。
你可以使用docker-compose和容器隔离项目之间的依赖关系。此外，你可以在浏览器中轻松预览所做的更改，并与团队成员共享公共和私有端口。你还可以编辑或添加一些细节，如空格、制表符、浅色/深色主题、美化代码、Prettier等。
对于想试试运气的初学者，GitHub Codespaces可以免费使用，但功能有限。但对于日常使用而言，它提供了足够的功能。如果你是团队或企业，可以以40美元/用户/年的价格开始使用GitHub Codespaces。
JetBrains Space
在几秒钟内获得全新的、可重复的、开箱即用且自动化的云开发环境，并开始使用JetBrains IDE – Space进行编码。它是软件项目和团队的单一解决方案，涵盖了整个开发生命周期，包括CI/CD管道、托管Git仓库和发布包。
Space是带有Docker容器的专用虚拟机。你可以在其中安装项目所需的所有必要库和工具。通过随时共享和复制编码工作区，可以简化并加快入职流程。
这可以让新手立即开始代码开发，而无需浪费时间配置本地机器。当你需要开始编写代码、调试并在几秒钟内运行它来测试输出时，你将获得一个开箱即用的完整IDE。JetBrains提供了一个用于管理开发环境的集中式平台。
你所做的每一件事和你使用的每一个资源都会在一个地方被跟踪。你还可以轻松地将资源集成到开发管道中。你可以根据项目的大小选择适合项目大小的首选虚拟机类型。Space可以通过休眠编码工作区来节省资源，这样你就可以在休息后继续工作。
今天就开始你的旅程，免费体验这个强大工具的魅力。
CodeTasty
CodeTasty是一个可扩展、智能且现代的云IDE，具有许多你可能会喜欢的附加功能。它可以帮助你以你喜欢的语言实时编写更清晰、易读的代码。
它可以让你获得流畅的代码编辑体验，包括内置的编译、代码完成和错误检测工具。无需担心环境设置，直接开始处理项目即可。
当你在云端编辑代码时，你将获得与使用桌面环境相同的体验，同时享受相同的性能和速度。CodeTasty了解每个开发人员的需求，因此它允许你安装尽可能多的扩展来提高你的工作效率。此外，它在一个文件中支持40多种语言和上百行代码。
免费试用CodeTasty，你将获得1个沙盒工作区、2个FTP/SSH工作区、协作、终端选项和2个协作者。你还可以从每月4美元的付费计划开始，并有机会在运行前修改代码。
Replit
使用Replit的免费、基于浏览器的协作IDE学习、编写和创建代码。它支持50多种语言，无需花费大量时间进行设置。你可以在任何设备、操作系统和平台上开始使用你喜欢的语言编写代码。
你可以邀请你的队友、同事或朋友像编辑Google文档一样编辑代码。你可以将代码导入GitHub，以零配置运行GitHub存储库并与之协作。无论你是否熟悉C++、Python、CSS或HTML，你都可以在一个平台上编写和编辑代码。
此外，一旦你的代码准备就绪，它就会立即发布到全世界。如果你还想了解代码，Replit拥有超过300万技术人员、创意人员、热情的程序员等等。通过与你的团队进行实时协作，你的团队将更有效率。此外，你可以借助插件在编码时创建应用程序、机器人等等。该工具还可以帮助你直接从浏览器开发项目。
注册一个帐户并立即开始编写代码。
PaizaCloud
使用PaizaCloud IDE在浏览器中构建Web应用程序。它为Node.js、MySQL、Django、Java、PHP、Jupyter Notebook、Laravel、WordPress等提供了Web开发环境。
PaizaCloud允许你无缝地编写代码，而无需担心设置环境。只需打开浏览器，你的环境将在三秒钟内准备就绪。无论你使用的是Mac、iPad、OS还是Windows版本，你都可以在每个浏览器中操作相同的环境。
此外，你可以使用Linux shell来更轻松、更灵活地设置基于Web的开发环境。你还可以通过升级到基本计划来发布适合你的投资组合的理想服务，例如托管服务。
在浏览器本身中运行命令、管理文件、编辑代码等。PaizaCloud无需添加vim、ssh等命令来编辑文件或登录。相反，你可以像运行桌面应用程序一样轻松高效地操作服务器。
使用具有2核和2GB内存的免费计划进行试驾。或者，以每月9.80美元的价格享受无限的服务器寿命，并获得额外的1GB磁盘空间。
结论
本文介绍了撰写本文时的一些IDE和代码编辑器。在这个列表中，我省略了两种类型的产品：那些只专注于面试而没有成熟环境的工具（当然，除了我们熟悉的经典JSFiddle），以及那些似乎没有提供任何实质性功能，只有一个时尚主页的工具。
如果你需要一些轻量级的Web开发工具，可以尝试这些代码编辑器。