Using your editor as a JavaScript playground with Quokka.js

#tools

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.