JSLab feature notes: one docs page, explained. Today: Snippets and the command palette.
Two features in JSLab, a JavaScript & TypeScript scratchpad for macOS, that are about not typing the same thing twice.
Snippets: a name is a trigger
⌘B (or Tools → Snippets…, or the activity bar) opens the Snippets panel in the side bar. Search by name or description, then Insert a snippet at the cursor, Insert in New Tab, Copy, Edit or Delete it.
The part I use most: a snippet's name is its trigger. Type the name in the editor, press ⇥, and it expands. Names show up in autocomplete too. Tab only expands when a snippet's name sits right before the caret; everywhere else it indents as usual.
To make one, select some code and choose Edit → Create Snippet… (it's in the right-click menu too). With nothing selected, it starts from the whole tab. Each snippet has a Name (letters, digits, _, $ and -, unique), an optional Description, a Language hint and the Body.
Placeholders
A body can carry tab stops. After inserting, ⇥ jumps between them:
function ${1:name}(${2:args}) {
$0
}
$1, $2… are tab stops in order, ${1:name} has default text, and $0 is where the cursor ends. A body with no placeholders is inserted exactly as written, $ and all.
Import and export
Tools → Import Snippets… and Export Snippets… move your whole library as one JSON file ("format": "jslab-snippets"). Importing merges by name, ignoring case, and asks Overwrite, Keep Both or Skip on a clash. Imported snippets always get new ids, so a file can't overwrite one of yours by claiming its id.
One warning straight from the docs: an inserted snippet is live code. With Auto Run on, it runs like anything else you type, including one from someone else's library.
The command palette
⇧⌘P (View → Command Palette…) searches every command by name.
- Matched letters are highlighted, and results are grouped by section.
- Each result shows its shortcut, so the palette teaches you the keys as you go.
- Toggle commands show whether they're on or off.
- A command you can't use right now stays listed as Unavailable now, so you always know it exists.
Type a theme's name and the palette switches themes too. ↑ ↓ to move, ↵ to run, esc to close.
JSLab launches Nov 15. The full pages: https://js-lab.app/docs/snippets
Top comments (2)
The Tab-only-expands-when-the-name-sits-right-before-the-caret rule is the right compromise — anything looser and you've broken Tab as an indent key, which is unforgivable in a scratchpad.
"Unavailable now" instead of hiding the command is a nice touch too. Hidden commands teach people the feature doesn't exist; greyed-out ones teach them it exists but isn't applicable here.
Quick question: do snippets show up in the command palette as well, or do they live only in their own panel?
Thanks, and agreed: Tab has to stay an indent key first.
The palette (
⇧⌘P) carries the snippet commands: Snippets… (⌘B), Create Snippet…, Import Snippets… and Export Snippets…. Picking a particular snippet happens in the Snippets panel, or straight from the editor: names show up in autocomplete, and Tab expands one when its name sits right before the caret.js-lab.app/docs/snippets