2019年将使用的7个JavaScript游乐场

The importance of online code editing platforms cannot be overemphasized. As much as we love our local IDE's, one too many times we find ourselves needing to quickly share and or collaborate with a friend or colleague in our local projects.

在线代码编辑平台的重要性不可过分强调。 尽管我们很喜欢我们的本地IDE，但有很多次我们发现自己需要在我们的本地项目中与朋友或同事快速共享或合作。

In cases like this, online playgrounds give us that added functionality to write and run codes as well as share snippets and have colleagues test it out and give us feedback. In this post, we'll be looking at the top 7 online code editors for JavaScript in no particular order.

在这种情况下，在线游乐场为我们提供了编写和运行代码以及共享代码段的新增功能，并让同事对其进行测试并提供反馈。 在本文中，我们将按无特定顺序查看JavaScript的前7名在线代码编辑器。

密码笔 ( CodePen )

CodePen is an online social development environment for front-end developers. It comes fully equipped with all the features you'll need to build, test, share, collaborate and even deploy your websites.

CodePen是面向前端开发人员的在线社交开发环境。 它完全具备构建，测试，共享，协作甚至部署网站所需的所有功能。

Plans and Features CodePen plans are flexible enough to accommodate whatever needs you might have. First, there are individual and team plans. Under the individual plans, you have a range of other plans that have been carefully structured to offer you a wide range of choices depending on what features are more important to you and on how much you can afford.

计划和功能 CodePen计划足够灵活，可以满足您的任何需求。 首先，有个人和团队计划。 在单独的计划下，您还有一系列其他计划，这些计划经过精心构造，可以根据对您而言更重要的功能以及您负担得起的价格为您提供广泛的选择。

The free plan has all you need to perform usual operations like creating pens, sharing snippets, running tests and so much more. If you're developing for experimental purposes or just building out your project for development purposes, the free plan has all you need.

The PRO plan, however, adds a little bit to what you can do with CodePen. With CodePen PRO, you get unlimited privacy, asset hosting space, live view, embedded themes and so much more. On the PRO plan, you won't miss your local IDE. If you have specific needs for these features and you've got a few dollars to spare, then these plans are totally worth the price.

但是，PRO计划为您使用CodePen所做的工作增加了一点。 借助CodePen PRO，您可以获得无限的隐私，资产托管空间，实时取景，嵌入式主题等等。 在PRO计划中，您将不会错过本地IDE。 如果您对这些功能有特定的需求，并且可以节省几美元，那么这些计划绝对物有所值。

You can visit the pricing page to have a closer look at what each plan offers to help you decide. However, that's not all, as we mentioned earlier, there's also a team plan for people working in teams. The price of the team plan is subject to the number of members in your team. However, it comes with a standard $12/month/member price.

您可以访问定价页面以仔细查看每种计划提供的帮助您做出决定的内容。 但是，正如我们前面提到的，还不止这些，还有针对团队合作人员的团队计划。 团队计划的价格取决于您团队中成员的数量。 但是，它带有标准的$ 12 /月/会员价。

CodeSandbox ( CodeSandbox )

CodeSandbox is an online editor that allows developers to focus on writing code while it handles all the necessary background processes and configurations. Unlike CodePen, CodeSandbox focuses more on building and sharing code demos that contain back-end components. The editor is optimized to analyze npm dependencies, show custom error messages, and also make projects searchable by npm dependency.

CodeSandbox是一个在线编辑器，它使开发人员可以在处理所有必要的后台过程和配置的同时专注于编写代码。 与CodePen不同，CodeSandbox更加关注于构建和共享包含后端组件的代码演示。 该编辑器经过优化，可以分析npm依赖性，显示自定义错误消息，并使项目可以通过npm依赖性进行搜索。

CodeSandbox offers dedicated sandboxes to help developers quickly get started on developing with their favorite tools to build web applications. With CodeSandbox, all you need to do is open the browser, select your preferred development tool and start writing code. It abstracts all the backgrounds tasks and configurations so that you only need to worry about writing your code. With Condesandbox, we can do all of the following and more:

CodeSandbox提供专用的沙箱，以帮助开发人员使用他们最喜欢的工具来快速开始开发，以构建Web应用程序。 使用CodeSandbox，您所需要做的就是打开浏览器，选择您喜欢的开发工具，然后开始编写代码。 它抽象了所有后台任务和配置，因此您只需要担心编写代码。 借助Condesandbox，我们可以执行以下所有操作：

Github integration With Codesanbox 2.0, you can commit, create repositories and open pull requests right from within CodeSandbox.

Github集成使用Codesanbox 2.0，您可以直接在CodeSandbox内提交，创建存储库并打开拉取请求。

Host static files CodeSandbox hosts all the files in the public directory for you. Previously this functionality didn't exist on CodeSandbox, but now, you can add static images, web workers, etc. As a result, you can imitate all the functionalities of your local development server as you now have full access to the index.html file.

托管静态文件 CodeSandbox为您托管公共目录中的所有文件。 以前，此功能在CodeSandbox上不存在，但是现在，您可以添加静态图像，Web Worker等。因此，由于您现在可以完全访问index.html ，因此可以模仿本地开发服务器的所有功能。文件。

Real-time collaboration With CodeSandbox, you can create a project and open a Live Session to generate a live URL you can share to colleagues. Through the URL, all your colleagues can work together on the project at the same time. This may seem difficult to manage when the number grows, and you can't track what each person is doing. As a result, you can switch to a Classroom Mode where you can specify who can edit the sandbox and who can only view.

实时 协作使用CodeSandbox，您可以创建项目并打开实时会话以生成可以共享给同事的实时URL。 通过URL，您的所有同事可以同时在项目上一起工作。 当人数增加时，这似乎很难管理，而且您无法追踪每个人在做什么。 因此，您可以切换到“ 课堂模式” ，在其中可以指定哪些人可以编辑沙箱和哪些人只能查看。

Visual studio code integration CodeSandbox has a feature called VSCode in browser. It allows you access to VSCode features like keybindings, user snippets, breadcrumbs etc. All you need to do is copy your settings files directly from VSCode to CodeSandbox, and you will have control of all the files on your sandbox. These are only a handful of the features you'll get with CodeSandbox, there are more, like working in teams, Sandbox containers etc. I invite you to check them out their docs page for more.

Visual Studio代码集成 CodeSandbox在浏览器中具有称为VSCode的功能。 它允许您访问VSCode功能，例如键绑定，用户摘要，面包屑等。您所需要做的就是将设置文件直接从VSCode复制到CodeSandbox，从而可以控制沙箱上的所有文件。 这些只是CodeSandbox可以提供的少数功能，还有更多功能，例如团队合作，Sandbox容器等。我邀请您在他们的文档页面中查看更多信息。

后端支持 (Back-end support)

It is worthy to note that CodeSandbox is one of the few online playgrounds that has support for back-end languages like Node.js. What's more? It has npm support. As a result of it, you can install any npm package you require in seconds.

值得注意的是，CodeSandbox是少数支持Node.js等后端语言的在线游乐场之一。 更重要的是？ 它具有npm支持。 结果，您可以在几秒钟内安装所需的任何npm软件包。

StackBlitz ( StackBlitz )

StackBlitz is a VSCode powered online playground for web developers. It offers developers the ability to create projects in just one click. The collaboration features of StackBlitz makes it possible to share a created project with colleagues through a unique project URL.

Seamless project setup Like other playgrounds we've already mentioned, StackBlitz automatically takes care of all the background processes involved in setting up projects; like installing dependencies, compiling, bundling, etc. This way it abstracts the setup process for you so you can focus on what you do best, writing code. Stackblitz is renowned for its ability to handle Angular and React projects, all you need to set up a new of them is the click of a button.

StackBlitz是由VSCode驱动的面向Web开发人员的在线游乐场。 它使开发人员只需单击即可创建项目。 StackBlitz的协作功能使通过唯一的项目URL与同事共享创建的项目成为可能。 无缝的项目设置就像我们已经提到的其他游乐场一样，StackBlitz会自动处理项目设置过程中涉及的所有后台过程。 例如安装依赖项，编译，捆绑等。通过这种方式，它为您抽象了设置过程，因此您可以专注于最擅长的事情，编写代码。 Stackblitz以处理Angular和React项目的能力而闻名，您只需单击一个按钮，就可以设置一个新项目。

VSCode similarity Because VSCode powers StackBlitz, it comes packed with all the Aesthetic features we love in VSCode, giving you the look and feel of your local IDE.

VSCode的相似性由于VSCode为StackBlitz提供支持，因此它具有VSCode中我们喜欢的所有美学功能，从而为您提供了本地IDE的外观和感觉。

TypeScript support StackBlitz has TypeScript support and TypeScript auto-completion, a feature that is not found in other IDE's like Plunker.

TypeScript支持 StackBlitz具有TypeScript支持和TypeScript自动补全功能，该功能在其他IDE（如Plunker）中都找不到。

NPM support With StackBlitz, you can import any npm package into your project, just like you would in VSCode. Better still, you can copy snippets from documentation pages and blogs into the editor and it'll automatically detect the missing packages and prompt you to install them.

NPM支持使用StackBlitz，可以像在VSCode中一样将任何npm包导入到​​项目中。 更好的是，您可以将片段从文档页面和博客复制到编辑器中，它将自动检测丢失的软件包并提示您安装它们。

Image credit to

Eric Simons.

Eric Simons 。

Offline support Thanks to StackBlitz in-browser development server, you can continue writing code and editing your work even when offline. This gives you the superpower to build offline while leveraging the power of the online platform, killing two birds with one stone. We can't possibly go over all the perks, but you're welcome to see them yourself on the website.

脱机支持借助StackBlitz浏览器内开发服务器，即使脱机也可以继续编写代码和编辑工作。 这使您拥有超级强大的能力，可以在利用在线平台的强大功能的同时离线构建，用一块石头杀死两只鸟。 我们不可能完全解决所有问题，但是欢迎您在网站上亲自看到这些内容。

##

##

JS小提琴 ( JS Fiddle )

JSFiddle is an online playground for creating, testing and showcasing collaborational HTML, CSS and JavaScript code snippets, known as 'fiddles'. It is one of the earliest playgrounds that laid the foundation for the creation of other modern-day playgrounds. At the moment, it may seem a bit basic compared to modern playgrounds like CodePen; however, it still performs basic playground operations like testing, sharing, and collaboration. As an added advantage, JSFiddle can also perform complex ajax simulations.

JSFiddle lets you quickly get started by providing access to unique boilerplate templates for diverse technologies. As a result, it'll take you just about the click of a button to generate a boilerplate code for React, Vue or whichever technology you want.

JSFiddle是一个在线游乐场，用于创建，测试和展示协作HTML，CSS和JavaScript代码段，称为“小提琴”。 它是最早的游乐场之一，为创建其他现代游乐场奠定了基础。 目前，与诸如CodePen的现代游乐场相比，这似乎有点基础。 但是，它仍然执行基本的操场操作，例如测试，共享和协作。 另外一个优点是，JSFiddle还可以执行复杂的ajax仿真。

As much as JSFiddle behaves alike with other playgrounds, it has certain features that make it equally unique in its own way. Unlike most others, with JSFiddle, you can customize, add and use other JavaScript tools and frameworks easily. With the

Togetherjs support, JSSFiddle offers an interactive user interface that lets users collaborate and share fiddles with colleagues. Moreso, it has inbuilt Git support. You can also use JSFiddle for any of the following:

Togetherjs支持，JSSFiddle提供了一个交互式用户界面，使用户可以协作并与同事共享小提琴。 此外，它具有内置的Git支持。 您还可以将JSFiddle用于以下任何一项：

• Bug reporting (test-case) for Github Issues
  Github问题的错误报告（测试用例）
• Presenting code answers on Stack Overflow
  在堆栈溢出中显示代码答案
• Live code collaboration
  实时代码协作
• Code snippets hosting
  代码段托管

宾斌 ( JS BIN )

JSBin is a live playground for Html, CSS and JavaScript and a range of other preprocessors like jade, markdown and much more. It provides specific editor panels with an intuitive user interface for user interactivity. With JSBin, users can create bins, share, collaborate and test codes.

JSBin是Html，CSS和JavaScript以及玉器，降价等一系列其他预处理器的实时游乐场。 它为特定的编辑器面板提供了用于用户交互的直观用户界面。 使用JSBin，用户可以创建垃圾箱，共享，协作和测试代码。

JSBin is mostly focused on the ability to share code. It shares not just the code but also the complete output result of the code in the bin. It's real-time collaboration features lets colleagues view and see changes in real-time as you type in the editor panels.

Though JSBin opens into a default Html code on start, there are many libraries available for you. You can add as many libraries as is required for your project to build your desired product.

尽管JSBin在启动时会打开默认的Html代码，但仍有许多库可供您使用。 您可以根据需要添加任意数量的库来构建所需的产品。

With JSBin, all created bins have a unique sharing Url that other users can join with to collaborate, fork and or edit the bin, while your original bin remains intact. Moreso, with JSBin, you can perform the following operations and more

使用JSBin，所有创建的垃圾箱都有一个唯一的共享网址，其他用户可以与之协作，合并和/或编辑垃圾箱，而原始垃圾箱保持不变。 此外，使用JSBin，您可以执行以下操作以及更多操作

• Export your bins as a gist
  将您的垃圾箱导出为要点
• live reload bins in editor and full preview
  编辑器中的实时重装箱和完整预览
• Download bins
  下载箱
• Save snapshots of bins
  保存垃圾箱快照
• Templatize bins
  对垃圾箱进行模板化
• Archive bins
  存档箱
• etc
  等等

JSBin also has a PRO plan that adds more functionality to what you can do. It gives an additional layer of features to extend your bin functionality. With The JSBin PRO, you can

JSBin也有一个PRO计划，可以为您的工作增加更多功能。 它提供了一层附加功能，以扩展您的bin功能。 使用JSBin PRO，您可以

• SSL embeds
  SSL嵌入
• Custom embed CSS and editor settings
  自定义嵌入CSS和编辑器设置
• Sandbox mode - does not save the bin
  沙盒模式-不保存垃圾箱
• Private bins
  私人垃圾箱
• Dropbox
  投寄箱
• Vanity URLs - blog post
  虚荣网址-博客文章
• Asset hosting
  资产托管

斯克林巴 ( Scrimba )

Scrimba is an entirely different kind of online playground than what we've seen so far. It offers you the ability to pause the video and edit the instructor's code and see the result in the editor.

与到目前为止，Scrimba是一种完全不同的在线游乐场。 它使您能够暂停视频并编辑讲师的代码，并在编辑器中查看结果。

In- video interaction This provides an extra layer of interactivity to the usual playground functionality. Scrimba lets you take up an instructors demo and build it up into whatever use case you desire. In the playground mode, you can interact with the instructor's code however you please, and you can edit, copy, paste and basically perform any interactive operation you desire.

在 - 视频相互作用这提供交互性的通常的操场功能性的额外层。 Scrimba可让您进行讲师演示，并将其构建到所需的任何用例中。 在游乐场模式下，您可以根据需要与讲师的代码进行交互，并且可以编辑，复制，粘贴并基本上执行所需的任何交互操作。

Cross-platform Scrimba is completely cross-platform. It adapts to any screen size and arranges contents in both portrait and landscape mode to match your screens resolution requirements, this way, it constantly serves you the best visual output.

跨 平台 Scrimba是完全跨平台的。 它可以适应任何屏幕尺寸，并且可以在纵向和横向两种模式下排列内容，从而满足您的屏幕分辨率要求，因此，它可以不断为您提供最佳的视觉输出。

Console and dependencies Scrimba has an in-built console that both the user and the instructor can access to run commands and debug code. You can log messages just the same way you would in any other editor. It also lets you install external dependencies into your project. What's better? the Scrimba team has designed the console in a way that you can see the console output with opening the console panel.

控制台和依赖项 Scrimba具有内置的控制台，用户和讲师都可以访问该控制台以运行命令和调试代码。 您可以像在其他任何编辑器中一样记录消息。 它还允许您将外部依赖项安装到项目中。 有什么更好的？ Scrimba团队设计了控制台，您可以通过打开控制台面板看到控制台输出。

Analytics Scrimbar has a sidebar notes features that track all the changes you make in the editor. This is a handy feature that gives you the ability to keep track of all your changes and refer to them in the future when the need be.

Analytics Scrimbar的侧边栏注释功能可跟踪您在编辑器中所做的所有更改。 这是一个方便的功能，使您能够跟踪所有更改，并在将来需要时引用它们。

活织者 ( Liveweaver )

Liveweaver is an online playground for Html, CSS, and JavaScript for web designers and developers. Like other editors we've come across, Liveweaver gives users the ability to create, test, and share code with colleagues.

It opens into distinct editor panels for Html, CSS, JavaScript and Output panels respectively. One remarkable feature of Liveweaver is its simplicity. A newbie could easily open up Liveweaver, create a small app and run it without reading up any prior documentation.

Liveweaver是面向Web设计人员和开发人员HTML，CSS和JavaScript的在线游乐场。 像我们遇到的其他编辑器一样，Liveweaver使用户能够创建，测试和与同事共享代码。

Moreso, Liveweaver supports a wide range of third-party libraries like Bootstrap, jQuery, Threejs etc. This helps developers build more robust applications without library support hinderances.

此外，Liveweaver支持广泛的第三方库，如Bootstrap，jQuery，Threejs等。这有助于开发人员构建更健壮的应用程序而没有库支持的障碍。

Liveweave is free to use and comes packed with over 20 handy JavaScript libraries. With Liveweave, you can do all of the following and more

• Toggle live preview in editor panel
  在编辑器面板中切换实时预览
• Toggle light and dark mode for better viewing
  切换明暗模式以获得更好的观看效果
• built-in ruler for measurements and aesthetics
  内置标尺，用于测量和美观
• Collaborate with colleagues easily with the TeamUp feature
  通过TeamUp功能轻松与同事协作
• Download weaves easily with a button click
  单击按钮即可轻松下载编织
• Supports SVG
  支持SVG
• etc
  等等

结论 ( Conclusion )

In this post we have discussed five top online JavaScript editors you can use in 2019. Each playground has it's unique abilities so its difficult to choose a "best" one amongst them. We can, however, choose the one whose features best solves our needs. Disclaimer: This five online playgrounds discussed here are entirely my choice based on my own experience with them. There are other amazing online playgrounds like Plunker, CSS Deck, Dabblet, etc. If you have other playgrounds in mind, please do share them with us in the comments below. Hopefully, this post would help you pick the most suitable one for your needs.

在本文中，我们讨论了2019年可以使用的五种顶级在线JavaScript编辑器。每个游乐场都有其独特的功能，因此很难在其中选择“最佳”功能。 但是，我们可以选择功能最能满足我们需求的产品。 免责声明：根据我自己的经验，这里讨论的这五个在线游乐场完全是我的选择。 还有其他很棒的在线游乐场，例如Plunker ， CSS Deck ， Dabblet等。如果您有其他游乐场，请在下面的评论中与我们分享。 希望这篇文章可以帮助您选择最适合您的需求。

翻译自: https://scotch.io/tutorials/7-javascript-playgrounds-to-use-in-2019