Skip to content

Snippets

Pro Feature

Please note that Quokka’s snippet-related features are available in VS Code only.

Quokka extends VS Code’s snippets features by introducing the concept of “Quokka snippets”, which are regular snippets in most respects except that they live together in a single file and are available for use when creating new files using Quokka. They are used in three commands, described below.

Quokka.js: New File

Quokka snippets will be available for selection when creating a new file using the Quokka.js: New File command. Selecting a snippet will set the content of the new file to the snippet, and will also enable autolog for the session (meaning it isn’t necessary to wrap expressions in console.log, or use logpoints or live comments to see the value).

Quokka.js: Create Snippet from Selection

The easiest way to create a new Quokka snippet is to select the text you want to turn into a snippet and execute the Quokka.js: Create Snippet from Selection command. This will open the Quokka snippets file and insert an entry based on the selection. Changes can be made directly to the entry (for example, setting cursor positions, or adjusting which language(s) the snippet applies to).

Quokka.js: Edit Quokka Snippets

The Quokka snippets file can be accessed directly using the Quokka.js: Edit Quokka Snippets command. Note that Quokka manages this file using jsonc (“JSON with comments”) logic, so custom formatting may not be maintained, but comments will be preserved.