JSLab
Download for Mac

Snippets

Save code you reuse under a short name, expand it with Tab, and import or export your whole snippet library.

A snippet is a piece of code you reuse, saved once under a short name so it’s a keystroke away in every tab.

The Snippets panel

Save code you reuse as a snippet, then insert it, open it in a new tab, or expand it by typing its name.

⌘B, Tools → Snippets…, or the activity bar opens the Snippets panel in the side bar. Pressing ⌘B again hides it, or switches to it if another side-bar panel is showing.

Search by name or description with the panel’s search field. For the snippet you pick, you can:

  • Insert it at the cursor, or Insert in New Tab;
  • Copy it;
  • Edit it;
  • Delete it. JSLab asks first, and you can undo a delete until you make another change.

Expand a snippet with its name

A snippet’s name is its trigger. Type the name in the editor and press ⇥ to expand it. Names also appear in autocomplete, even after you’ve typed the whole name.

Tab expands a snippet only when a snippet’s name sits right before the caret. Everywhere else, Tab indents as usual.

Create a snippet

Choose Edit → Create Snippet…, or right-click in the editor and choose it there. The new snippet starts from your selection, or from the whole tab when nothing is selected. You can also click New Snippet in the panel.

Each snippet has:

  • Name: the word you type to insert it. It can use letters, digits, _, $ and -, and has to be unique.
  • Description: optional, and searchable.
  • Language hint: TypeScript, JavaScript, TSX, JSX, or Any.
  • Body: the code itself.

Placeholders

A body can carry cursor placeholders. After inserting, ⇥ jumps between them:

  • $1, $2 and so on are tab stops, in order.
  • ${1:name} is a tab stop with default text.
  • $0 is where the cursor ends up.
function ${1:name}(${2:args}) {
  $0
}

A body with no placeholders is inserted exactly as written, with any $ left alone.

Import and export

Tools → Import Snippets… and Tools → Export Snippets…, or the panel’s own Import… and Export… buttons, move your whole library as a JSON file in the jslab-snippets format:

{ "format": "jslab-snippets", "version": 1, "snippets": [] }

Importing merges with the snippets you already have, matching names without regard to case. When a name is already taken, JSLab asks whether to Overwrite, Keep Both or Skip. Every imported snippet gets a new id, whatever the file says, so an imported file can never overwrite one of yours just by claiming its id.

Your library is saved as snippets.json in JSLab’s data folder. See Troubleshooting for where that is.

Last updated