Snippets

Snippets allow you to define re-usable templates to speed up writing code.

To create a snippet:

  • Open the right-hand pane and click New.

  • Enter the abbreviation (what to type followed by Tab to insert the snippet).

  • Enter any language groups the snippet should be available in. The format of these should be e.g. css, javascript with exactly ,  (comma-space) between each group. Currently available groups are: javascript, html, css, and c.

  • Enter any languages the snippet should be available in, in the same format as for language groups. Currently available languages are listed here.

  • Enter the body of the snippet (see Syntax below).

To insert a snippet:

  • Type the snippet’s abbreviation and then press Tab. This inserts the snippet and puts the cursor at the first tabstop.

  • Press Tab again to go to subsequent tabstops. Once the last tabstop is filled in, the snippet is complete and Tab behaviour reverts to normal.

Syntax

Snippets consist of text with @name placeholders and @{...} expressions.

Example

Here is an example snippet for a JavaScript function:

function @name(@args) {
	@body
}

Each @... placeholder creates a tabstop to be filled in, and starts off empty.

Names can be repeated, in which case they receive the value of the initial tabstop and are updated as you fill it in. For example, here is a snippet for a JavaScript require:

let @name = require("@{path:"./"}@name");@$

Notice that @name appears twice. The second instance will be automatically updated as the first instance is filled in, and will not have its own tabstop.

The require example also uses a default value — see below for details.

Note: the @$ placeholder at the end is just a regular placeholder called $, and is used to allow tabbing to the end of the snippet (otherwise pressing Tab after filling in the path placeholder would insert a literal tab).

Default values

Placeholders can have default values, which are JavaScript expressions (see Expressions below). The syntax is @{name:defaultValue}, where name is the name of the tabstop and defaultValue is a JavaScript expression to use as the default value.

Expressions

Snippets can contain JavaScript expressions enclosed within @{...}. These expressions have access to the values of tabstops, as well as some utility functions [TODO].