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.

Quokka.js is brought to you by the Wallaby.js team and is built on top of the same technology used in the Wallaby.js Core. If you like what you see in Quokka.js and would like the same live features for your unit tests and all files of your project, and a lot more, then definitely check out Wallaby.js.

Getting started

To get started with quokka.js in VS Code, install the extension first. Note that Quokka requires VS Code version 1.10.0 or higher.

Once the extension is installed, press Ctrl/Cmd + Shift + P to display the editor’s command palette, and then type Quokka to see the list of the available commands.

Live Feedback (basic feature)

You may create a new Quokka file, or start Quokka on an existing file. The results of the execution are displayed right in the editor. To see the full execution output, you may view the Quokka Console by invoking the Show Output command or clicking the bottom-right status bar indicator.

It is recommended to memorize a couple of quokka keyboard shortcuts (you may see them when using the editor’s command palette). This way it’ll be much faster:

Live Logging/Compare (basic feature)

You may use console.log or identifier expressions to log values and sequence expressions to compare objects:

Note that when using identifier expressions for logging (for example, typing a to see the value of the a variable), you may hit some limits in terms of the number of displayed properties and the logged object traversal depth. In this case, you may use console.log(a) to display objects without the limitations.

Live Comments (premium feature)

While console.log may do the great job for displaying values, sometimes you may need to see the value right in the middle of an expression. For example, given a chain of a.b().c().d(), you may want to inspect the result of a.b().c() before .d() is called.

The most powerful way to log any expression is to use a special comment right after the expression you want to log.

Watch expressions in action

Inserting the special comment /*?*/ after some expression will log just the value of that expression.

You may also write any JavaScript code right in the comment to shape the output. The code has the access to the $ variable which is the expression that the comment is appended to. The executed code is within a closure, so it also has the access to any objects that you may access from within the current lexical environment.

Note that there’s no constraints in terms of what the comment code can do. For example, the watch comment below is incrementing d.e value, and returning $, which points to the expression that the comment is appended to (a.b).

Live Performance Testing (premium feature)

The feature allows to quickly see how various parts of your code perform. It can be very helpful for identifying possible bottlenecks in your app and for doing the performance optimization, or just for experimenting to see how different things perform.

Live Performance Testing in action

Inserting the special comment /*?.*/ after any expression will report how much time it took to execute the expression.

Live Performance Testing in action

Adding the comment to an expression that gets executed multiple times, for example inside a loop, will make the tool to display total execution time, average execution time (total execution time divided by number of times the expression had been executed), minimum and maximum execution time.

Live Performance Testing in action

Runtime

Quokka.js is using your system’s node.js to run your code. You also may configure quokka to use any specific node.js version, for example if you are using nvm.

To simulate browser environment, you may use this plugin.

Configuration

Quokka.js doesn’t need any configuration by default. It will run your code using your system’s node.js. It may also run your TypeScript code without any configuration, if you are not importing any external TypeScript modules.

If you want like to use Babel/React JSX, or to import other TypeScript files from your project in your Quokka file, or to override tsconfig.json settings, you may configure quokka.js.

Plugins

Quokka.js supports the plugins setting, that allows to specify a file or a node module with some code to execute at various stages of the quokka.js code running workflow. You may also find more information about how to write quokka plugin in the Extensibility docs section.

Examples

Questions and issues

If you found an issue, please report it in our support repository.