Skip to content

Overview

Quokka supports 4 sources of configuration (in addition to editor extension UI related settings):

The settings in the global config file are applied to all Quokka files, no matter if you are running Quokka in an opened project or not.

The settings in a package.json file are applied to all Quokka files opened in the context of the opened project.

The settings in a .quokka file are applied to all Quokka files opened in the context of the opened project.

The inline settings in your Quokka file are applied only to the opened file.

The settings in the package.json file override the settings in the global config, settings in the .quokka file override the settings in the package.json file, and the inline settings have the highest precedence and will override any values set with other methods.

If you change your settings, you must restart your Quokka files to use the updated settings.

Inline config

To add Quokka configuration right in the Quokka file, you may start the file with the object expression that defines the settings:

({
    babel: true
})


var abc = 123;


abc


// the rest of your Quokka file

.quokka file config

To add Quokka configuration options for your project, you may add the .quokka JSON file in your project and add Quokka settings directly to the root object, for example:

{
  "babel": true
}

Note that settings in the .quokka file override the settings in the package.json file, so if you have some team settings for Quokka in the package.json file, and would like to override them with your personal settings, then you should add these settings to the .quokka file.

package.json config

To add Quokka configuration options for your project, you may add a quokka object property and provide your settings within that property, for example:

{
  "name": "my-project",
  "quokka": {
    "babel": true
  }
}

The configuration samples below describe the content of the quokka object property.

Global config file

When Quokka.js starts for the first time, it creates the global Quokka.js settings folder:

On Mac OSX and Linux: ~/.quokka

On Windows: %USERPROFILE%\.quokka

The global config JSON file is the config.json file in the folder. You may add Quokka settings directly to the root object, for example:

{
  "babel": true
}

Editor settings

If you are using VS Code, you can override our editor display settings with VS Code User Setting overrides. You can view the overridable settings in the VS Code Settings editor under Settings -> Extensions -> Quokka.

You may override the coverage indicator colors in VS Code’s user settings (settings.json file). The snippet below shows the config with Quokka’s default colors.

{
    ...
    "quokka.colors": {
        "covered": "#62b455",
        "errorPath": "#ffa0a0",
        "errorSource": "#fe536a",
        "notCovered": "#cccccc",
        "partiallyCovered": "#d2a032"
    }
}

If you are using VS Code, you may configure Quokka to automatically start on a file if it was running when the file was last closed by updating your VS Code setting quokka.automaticRestart to true. Please note that this setting is ignored if your file is opened using Run on Save or Run Once.

If you are using VS Code, you may configure Quokka to start automatically if your file matches a regular expression by updating your VS Code setting quokka.automaticStartRegex. For example, to have Quokka start automatically on all files that end with .quokka.js, you would update the setting to \.quokka\.js$.

If you are using VS Code, then by default, your license and settings will automatically be synchronized between VS Code remoting instances, and between other machines when Settings Sync is enabled. This can be disabled by setting the VS Code setting quokka.syncSettings to false.

By default, when using a JetBrains editor, Quokka will automatically start on any JavaScript/TypeScript scratch file when it is first opened. This behavior can be disabled by adding a Global Quokka configuration setting scratchAutoStart with a value of false.

{
  "scratchAutoStart": false
}