Snippets

A snippet is a piece of code you insert often, with placeholders you tab through instead of editing the template by hand.

Snippets use CodeMirror's snippet template syntax. That means the same templates work whether you insert them from the picker, from a snippet key on the accessory bar, or from the snippet Test screen.

The library

Settings → Snippets lists yours under My snippets. Tap + for a new one, or a snippet to edit it. A snippet has:

• Name, what you search for in the picker.
• Template, the text inserted, with placeholders, shown with its line numbers. Edit opens it in the editor, whose toolbar has a share and a download button (Share, Import) for a template kept as a file; its Done brings the text back here, and the snippet's own Save stores it. Test tries it in a scratch editor.
• Mnemonic, optional: one or two characters shown as the key label when the snippet is bound to a keyboard slot, such as fn or 🔥. Longer mnemonics are refused, as they are for script keys; if a script or another snippet already shows the same characters, you are told, and can keep them anyway. In the list, each snippet starts with its key; tap it to set the mnemonic there.
• Language, optional. A tagged snippet ranks first when that language's file is open; untagged snippets are generic.
• Description, optional.

Used by shows which keyboard slots the snippet is bound to.

Template syntax

for (let ${1:i} = 0; ${1:i} < ${2:end}; ${1:i}++) {
  ${3}
}

The inserted text is plain text, except for placeholders:

Syntax	Meaning
${}	An empty field.
${name}	A field whose default text is name.
${1}	Field 1, without default text. Numbered fields control the tab order.
${1:name}	Field 1, with name as the selected default text.
${0}	Field 0. Because fields are sorted by number, it comes before ${1}.
#{name}	Same as ${name}. Useful when writing text that already contains many $ characters.
\{ or \}	A literal brace that should not start or end a placeholder.

When a snippet is inserted, the first field is selected. Type to replace it, press Tab to move to the next field, or Shift+Tab to go back. While the snippet is active, Tab and Shift+Tab move between fields; after the last field they go back to indenting and outdenting.

Multiple occurrences of the same field are linked. In the for example, all three ${1:i} fields are selected together, so changing i to index updates the loop initializer, condition and increment.

Fields without numbers are visited in the order they appear, after any numbered fields. For example, ${a} ${1:b} opens on b, then moves to a. Use numbers when you want a different order, or when repeated fields should stay linked.

To put the last stop after ${1} and ${2}, give it a higher number such as ${3} or ${99}. Do not use ${0} for that in HachiCode: with the bundled CodeMirror snippet support, ${0} is the first numbered field. If you wrote snippets with ${0} as the last stop based on older help text, change it to a higher number.

Indentation

Newlines in a template are indented relative to the line where you insert the snippet. A tab character after a newline adds one editor indent unit. This makes block snippets adapt to the current file's indentation:

if (${condition}) {
	${}
}

The line with ${} is one indent unit inside the if block, even in a file that uses two spaces or four spaces for indentation.

Insert one

• Cmd+; opens the snippet picker. It lists snippets for the current language first, then generic ones, then the rest; nothing is hidden, only ranked. Typing narrows it by name or mnemonic, the best match first within each of those groups, then by id or language as plain text — see Searching lists. The accessory bar's snippet picker searches the same way.
• A key on the accessory bar bound to the snippet's slot inserts it with one tap; see Custom keyboards.
• The command palette can open the picker as well, and a key on the accessory bar can be bound to it.

Snippets cannot be bound to hardware shortcuts; the shortcuts screen holds built-in actions and scripts.

Examples

TypeScript: log a value

Template:

console.log('${1:label}', ${1:label});
${2}

• Name log, mnemonic lg, language TypeScript.
• The label is typed once and appears in both the string and expression.

TypeScript: for loop

Template:

for (let ${1:i} = 0; ${1:i} < ${2:items}.length; ${1:i}++) {
	const ${3:item} = ${2:items}[${1:i}];
	${4}
}

• Name fori, mnemonic fi, language TypeScript.
• Tab order is index, collection, item name, then the loop body.

TypeScript: try/catch

Template:

try {
	${1}
} catch (${2:error}) {
	${3}
}

• Name try, mnemonic tc, language TypeScript.
• The empty ${1} field lets you write the protected block before the catch variable and handler.

TypeScript: React component

Template:

type ${1:Name}Props = {
	${2}
};

export function ${1:Name}({ ${3} }: ${1:Name}Props) {
	return (
		${4}
	);
}

• Name component, mnemonic rc, language TypeScript.
• Reusing ${1:Name} keeps the props type and component name together.

Go: error check

Template:

if ${1:err} != nil {
	return ${2}
}

• Name err, mnemonic er, language Go.
• Put the return values in ${2} after the snippet expands.

Go: table-driven test

Template:

func Test${1:Name}(t *testing.T) {
	tests := []struct {
		name string
		${2}
	}{
		{
			name: "${3:case}",
			${4}
		},
	}

	for _, tt := range tests {
		t.Run(tt.name, func(t *testing.T) {
			${5}
		})
	}
}

• Name test, mnemonic tt, language Go.
• Tab order walks through the test name, fields, first case, case values, then the assertion body.

Python: function

Template:

def ${1:name}(${2:args}):
	${3}

• Name def, mnemonic df, language Python.
• The body line uses a tab in the template so it becomes one Python indent unit in the editor.

Python: entry point

Template:

if __name__ == "__main__":
	${}

• Name main, mnemonic mn, language Python.

Python: context manager

Template:

with ${1:open(path)} as ${2:f}:
	${3}

• Name with, mnemonic wi, language Python.
• Use it for files, locks, database connections, or any object with a context manager.

Markdown: fenced code block

Template:

```${1:lang}
${2}
```

• Name code, mnemonic ``, no language.

Markdown: admonition

Template:

> [!${1:NOTE}]
> ${2}

• Name note, mnemonic nt, language Markdown.
• Change NOTE to TIP, IMPORTANT, WARNING or CAUTION if your Markdown renderer supports GitHub-style alerts.

JSON: object property

Template:

"${1:key}": ${2:"value"}${3}

• Name prop, mnemonic pr, language JSON.
• The default value includes quotes because placeholders insert exactly the text inside them.

Shell: guarded block

Template:

if ${1:command}; then
	${2}
fi

• Name if, mnemonic if, language Shell.
• The command and body are separate fields.

Literal braces

Use backslashes when a template needs braces that should not be parsed as placeholder syntax:

const ${1:name} = \{ ${2} \};

See also

• Custom keyboards
• Editor basics