Using your editor as a JavaScript playground with Quokka.js

aurelkurtula

aurel kurtula

Posted on November 14, 2017

Using your editor as a JavaScript playground with Quokka.js

I was watching a video from the fantastic youtube show Fun Fun Function and mpj was using Quokka.js and I thought it was amazing. I still find myself opening an index.html file in a browser or more often then not I navigate to jsbin.com just to test some JavaScript - not anymore!

On it's documentation Quokka describes itself as so:

Quokka.js is a rapid prototyping playground in your editor, with access to your project’s files, inline reporting, code coverage and rich output formatting.

This is what it does:

The blue output looks like a comment that I wrote but it's Quokka. And when you make a mistake it tells you

And lastly, if the output doesn't show inline as above, you can see it in the editor's console.

This plugin can be installed in VS Code, JetBrains IDE, and Atom. The above screenshots are from my VS Code editor.

To get started (at least in VS code) you open the Command Palette (shift+cmd+P) and Quokka.js: Start on Current File or Quokka.js: New File. There are other commands that can be explored. One of the options is to stop Quokka from watching your files, if it gets annoying.

💖 💪 🙅 🚩
aurelkurtula
aurel kurtula

Posted on November 14, 2017

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related