在在线IDE或代码编辑器中进行编码有很多好处。有了这些工具，你不需要在本地设置任何东西，你可以轻松地分享你的工作，而且它们通常是免费使用的。
在这篇文章中，你将了解什么是代码编辑器和IDE。然后，我还将分享7个对HTML、CSS和JavaScript效果最好的在线编辑器和IDE。
什么是代码编辑器？
代码编辑器是一种用于编写和编辑代码的工具。流行的离线代码编辑器包括Visual Studio Code, Atom, Brackets, 和Sublime Text。
代码编辑器使网络开发者有可能写出能在网络上运行的程序。代码编辑器很有帮助，特别是因为它们能突出显示语法错误，并提供自动代码缩进、代码完成和其他有用的功能。
什么是IDE？
IDE是集成开发环境的意思。你可以把这个工具当作一个编译器、编辑器和调试器来使用--所以它比基本的代码编辑器要复杂得多。
编译器是一个程序，它把你写的代码翻译成机器可以阅读的东西。调试器是一种工具，它允许你逐行浏览你的代码，并确定问题（bug），以便你可以修复它们。
为什么选择在线编辑器而不是本地编辑器？
什么时候可以选择在线编辑器而不是像Visual Studio Code这样的本地环境？
可能有的时候，你只是想在Stack Overflow上分享一个快速工作的例子，而使用一个免费的在线编辑器比在本地构建它更快。
或者你想分享一个新功能的小的工作实例，作为文档？把你的代码放到一个在线编辑器中并分享URL，比从你的本地设备上部署项目要容易得多。
现在你知道了什么是代码编辑器和IDE，让我们来讨论一下目前最流行的一些编辑器。
CodeSandbox
CodeSandbox是一个在线集成开发环境和代码编辑器，使开发人员能够轻松地创建和分享他们的项目。
一旦你创建了一个免费账户，你就可以通过选择一个带有所有启动文件和模板代码的模板开始编码。
你可以在左侧添加任何你需要的文件和依赖性，并在右侧的预览窗口中看到你的结果:
如果你想分享你的工作，你可以复制URL地址或将你的生产应用部署到Netlify或Vercel。
如果你对私人NPM包、沙盒和GitHub存储库等额外功能感兴趣，那么你需要注册付费会员。
Replit
Replit是一个在线集成开发环境，使你能够轻松地开始构建和分享你的网络创作。一旦你登录到你的免费账户，你可以选择你的语言并创建一个新的副本。
Replit让你可以选择向你的项目添加文件、包和单元测试。如果你想分享你的项目，那么就复制预览窗口右侧上方的链接。
如果你想与其他开发者合作，你可以邀请他们进入你的副本并同步编码。你还可以通过屏幕左下角的聊天功能与其他开发者实时聊天。
如果你对私人副本和额外的存储空间等功能感兴趣，那么你将需要注册付费会员。
StackBlitz
StackBlitz是一个在线代码编辑器，使开发人员能够轻松地创建和部署前端、后端和全栈应用程序。使用你的GitHub账户登录，并从其中一个模板中选择。
StackBlitz允许你创建几十个文件，添加软件包，并连接到你现有的GitHub存储库。你还可以使用位于右侧预览窗口上方的URL来分享你的项目。
如果你想部署你的应用程序的生产版本，你可以使用Firebase进行部署。
如果你对额外的功能感兴趣，如无限制的私人项目和文件上传，那么你将需要注册一个付费账户。
Codepen
Codepen是一个在线编辑器，你可以在这里创建和分享小型前端创作。使用免费账户，你可以创建无限的笔和一个项目。
笔是包含一个HTML编辑器、一个CSS编辑器和一个JavaScript编辑器的小创作。Pens不支持多个文件。
Pens带有格式化和分析工具，以检查语法错误。你还可以使用CSS和JavaScript预处理器，添加包，以及添加外部脚本。
免费账户允许你创建一个项目，限制在十个文件。如果你想创建更多的项目，那么你就需要注册Codepen PRO。
JSFiddle
JSFiddle是一个在线IDE，允许你建立和分享你的前端代码片断。这个工具支持十几个JavaScript库和框架，以及Sass等CSS预处理器。
你还可以与其他开发者一起建立项目，并通过选择合作选项在聊天中进行交流:
当你需要为Stack Overflow的答案提供代码片段，或者作为文档的演示时，JSFiddle是非常好的选择。
缝隙(Glitch)
Glitch是一个在线代码编辑器，可以轻松创建和分享你的前端、后端和全栈应用程序。你可以免费注册并开始使用其中的一个模板:
Glitch提供了许多有用的工具，包括格式化工具、终端、导出项目到GitHub的选项，以及添加自定义域名的选项:
你还可以通过点击位于左上角的分享选项来分享你的工作或邀请其他开发者与你一起构建:
如果你对私人项目等附加功能感兴趣，那么你将需要注册付费会员:
PLAYCODE
PLAYCODE是一个在线代码编辑器，使创建和分享前端项目变得容易。PLAYCODE支持TypeScript, React, CoffeeScript, jQuery, Sass, Less等:
如果你想分享你的项目，那么你可以在编辑器的左上角找到可分享的链接:
如果你对其他功能感兴趣，包括私人项目和自定义URL，那么你可以注册一个付费会员:
结论
选择一个在线IDE或代码编辑器有很多好处。你不必担心下载任何软件，你可以在几分钟内非常容易地分享你的项目。
如果需要为Stack Overflow答案分享代码片段，为文档创建一个演示项目，或者与其他开发者分享想法，很多开发者会使用这些工具。
我希望你喜欢这篇文章。
