Quokka.js is a rapid prototyping playground right in your editor and in your project’s context, with 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.
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.
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:
- to open a new quokka file (
Cmd/Ctrl + K, Tfor TypeScript),
- or to (re)start it on an existing file (
Cmd/Ctrl + K, Q).
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.
Quokka.js is using your system’s node.js to run your code.
To simulate browser environment, you may use this plugin.
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.
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.
Questions and issues
If you found an issue, please report it in our support repository.