7大最佳代码游乐场：学习、分享与实验
作者：John Sonmez
你是否曾有过令人兴奋的代码想法，想要立即尝试并与同事分享？你并不孤单。代码游乐场让你做到这一点。它们是在线平台，让你无需设置、配置和拥有基础设施即可快速运行客户端和服务器端代码。你只需要创建一个账户，就可以开始编码了！
什么是代码游乐场？
代码游乐场是在线平台，让你与同事和社区构建、测试和分享代码。这些游乐场是创意的滋生地，并提供了一种简单的方式与社区分享你的想法。
例如，Codepen是最受欢迎的代码游乐场平台之一，它通过"热门"部分让用户探索其他人的作品，该部分列出了来自全球开发者的独特而有趣的代码示例。
一般来说，代码游乐场针对前端开发进行了优化，特别是HTML和CSS，但你也会找到服务器端代码游乐场。
除了分享你的工作，你还可以使用代码游乐场进行学习。初学者可以用它创建简单的网页模板（HTML/CSS）或运行JavaScript。考虑到新学习者通常在设置和配置开发环境方面遇到困难，这非常棒。
大多数代码游乐场都是免费使用的，但提供付费层级的高级功能。一些常见的代码游乐场功能包括：
- 功能丰富的网页编辑器（HTML、CSS和JavaScript），支持自动完成
- 实时预览窗口
- 支持Sass、Less、HAML、Stylus和其他预处理器
- 支持流行的JavaScript库，包括Vue.js、Angular、React等
- 协作编码功能
- Fork GitHub仓库
- 简单的分享选项
- 代码验证和开发者控制台工具
代码游乐场如何帮助你成为更好的程序员？
编程就是实践。你练习得越多，就变得越好。代码游乐场提供了实践、分享和实验的环境。它提供了一种简单的方式来启动你的项目并与世界分享。
此外，许多代码游乐场有每周挑战（例如CodePen）。这些挑战是独特的，让你解决问题，提高你的技能。简而言之，代码游乐场提供了一种无缝的编码方式，特别是对初学者。
7大最佳代码游乐场
1. CodePen
CodePen是一个顶级的在线代码游乐场，你可以在这里创建前端Pens和完整的团队项目。CodePen已经从代码游乐场发展成为一个更全球化的社交中心（拥有超过180万开发者），他们举办每周挑战并提供热门页面，社区可以从中获得灵感。
功能方面，你可以直接从浏览器构建和测试。它提供了整洁的用户界面和实时结果。作为初学者，你可以享受成为CodePen的一部分，而有经验的开发者可以分享他们的经验。他们还运行CodePen Spark，一个提供优秀编码资源的新闻订阅服务。
功能
- 支持自动完成和Emmet
- Pro计划支持私有pens
- 支持在网站上嵌入pens
- 支持资源托管
- 提供实时协作模式（Pro）
- 团队可以构建完整项目
CodePen Pro是他们的付费服务，提供高级功能，如资源托管、多个项目、协作移动、私有pens和实时视图。
2. JS Bin
如果你喜欢JavaScript，那么JS Bin就是你需要的东西。它是一个支持JavaScript和bins（类似于CodePen的pen）的在线编码平台。界面简洁，你可以将其分解为多个基于列的部分，以同时处理多个文件。
此外，它还支持扩展编辑，包括编辑HTML页面的<head>部分的能力。它也是少数几个开始支持控制台的游乐场之一，这对JavaScript开发至关重要。
功能方面，JS Bin提供实时重载、gist支持、调试、自定义模板、库和预处理器支持。你还可以使用键盘快捷键来提高生产力。就像CodePen一样，只有Pro计划让你创建私有bins。
如果你希望工作有隐私，又不想购买他们的Pro计划，你可以在本地下载JS Bin并运行你的项目。
功能
- 控制台支持
- 完整的未修改渲染视图
- 支持主要处理器，包括HTML、CSS、Markdown、Sass、JavaScript等
- 自定义模板和库支持
- 键盘快捷键
- 拖放文件
JS Bin的Pro版本提供1 GB存储、独特的自定义URL以及无限的bins和嵌入。
3. JSFiddle
JSFiddle是另一个流行的代码游乐场，提供极简功能，缺乏代码的实时视图。然而，它通过提供优秀的编辑器布局自定义和支持异步请求来弥补这一点。
在这里，你创建Fiddles（类似于Pen和Bin）。它支持HTML、CSS和JavaScript片段。此外，如果你喜欢其他人的项目，你可以fork它们并修改代码。
在JSFiddle上协作很容易。你只需要点击顶部菜单上的"协作"按钮，并将生成的链接分享给你的同事或朋友。一旦你的朋友加入，他们可以通过音频和聊天进行交流。
功能
- 广泛的布局自定义
- 支持HTML、CSS和JavaScript
- 协作功能
JSFiddle是免费使用的，没有任何付费版本。这意味着JSFiddle依靠捐赠来运营。
4. CodeSandbox
CodeSandbox让你将团队聚集在一起远程创建项目。它不仅仅是一个代码游乐场；它通过提供预配置环境、命令面板和开发工具，提供流线型的开发体验。
首先，你需要使用GitHub或Google账户登录并导入你的项目。接下来，邀请你的团队成员实时协作。
你还可以通过使用他们的扩展将CodeSandbox带到你的IDE中。它也适用于iOS、iPad和iPhone，让你可以随时随地编码。
像CodePen一样，CodeSandbox也提供了一个"特色"部分，你可以在那里找到社区项目。
功能
- 支持IntelliSense
- 预构建
- 通过魔法分支管理工作流程
- 支持键盘快捷键
- 编码时的实时预览
CodeSandbox是免费使用的。然而，你可以利用其Pro版本，它提供高级功能，如私有NPM包支持、更大的存储、私有沙盒、高级权限和集中计费。
5. Sololearn
Sololearn是一个无干扰的在线平台，适合学习者和专业人士。它支持Python、Java、C++、JavaScript、C#和其他主要编程语言。
由于它不是专门的代码游乐场，Sololearn代码编辑器并不先进。Sololearn确实有一个代码游乐场部分，你可以在那里创建"新代码"并尝试新想法。
在这里，你只有一个控制台和不同的部分来编写代码。
然而，Sololearn是一个优秀的学习者社区。你可以通过他们的"讨论"部分学习，与他人竞争，并在他们的排行榜上获得排名。
功能
- 专门的学习平台
- 极简但功能齐全的代码游乐场
- 支持多种编程语言
- 全球和课程排行榜
- 讨论并从社区获得反馈
你可以免费开始使用Sololearn。他们的Pro版本提供无限练习、目标跟踪和交互式代码演示。
6. Replit
Replit是一个广泛的在线代码游乐场。它提供了一个协作环境，支持50多种语言。Replit的浏览器内IDE是先进的，不需要任何用户端设置。
作为程序员，你可以快速开始使用GitHub Repos，并与同事和队友进行实时协作。
Replit对任何人都有帮助，无论他们的经验如何。为了改善学习体验，Replit提供学习资源和优秀的社区。此外，你创建一个可共享的实时Repl（类似于CodePen的pen）后，立即可以分享。
功能
- 无需设置即可开始编码
- 即时可共享的Repl
- GitHub支持
- 需要时可自定义设置
- 完全控制你的文件和设置
- 通用包管理器
- 模板支持
Replit带有一个免费层级，让你创建尽可能多的Repls。Replit Hacker计划提供访问高级功能，如AI驱动的助手。它还提供更好的存储、内存和速度。
7. CSS Desk
CSS Desk是一个功能丰富的代码游乐场，你可以使用HTML、CSS和JavaScript创建网页项目。它在社区中很受欢迎，用户数量达到10万。
尽管是一个简单的代码游乐场，它确实提供社交和协作功能。通过极简，它确实受益于提供更快的加载时间。
功能
- 简单和极简的布局
- 良好的布局选项
- 加载快速
CSS Desk是免费使用的，没有付费选项。
你应该选择哪个代码游乐场？
选择代码游乐场很容易。你必须查看代码游乐场是否支持你正在使用的编程语言。如果支持，尝试一下看看它的功能，如可配置性、可共享性和协作性。
我们推荐CodePen，因为如果你从事网页开发，它是一个很好的起点。它提供了优秀的界面、强大的社区和良好的编辑器功能。
对于特定的JavaScript项目，你可以选择JSFiddle和JSBin。如果你需要更多的编程语言支持，那么Replit应该引起你的注意。
对于学习者来说，Sololearn是一个很好的起点。对于类似的体验但没有代码游乐场选项，你可能还想看看FreeCodeCamp。
你的搜索不应止步于此。在代码游乐场方面，网络上有许多选择。我们建议查看Dabblet、PLAYCODE、Plunker、Glitch、Liveweaver和ESNextBin。
最后，记住代码游乐场是为了实验、分享你的工作和协作。那么，你想先尝试哪个代码游乐场？在下面评论并告诉我们。