DEV Community

Cover image for Settings and the Keybindings editor
JSLab
JSLab

Posted on

Settings and the Keybindings editor

#showdev #productivity #macos #javascript

JSLab feature notes: one docs page, explained. Today: Settings and Keybindings and the command palette.

Settings: one window, one search field

⌘, (or JSLab → Settings…) opens the Settings window. There's a search field across the top that searches every tab at once, and every field has help text under it.

Changes apply as you make them. Change the font size and the editor changes behind the window. The one exception is the interface language, which needs a restart, and JSLab tells you so.

Here's the Appearance tab: the search field across the top, help text under every option, and Theme, Light and Dark Theme, Font and Font Size.

JSLab Settings, Appearance tab: a Search settings field at the top, then Theme set to Graphite, Follow System Appearance, Light Theme Graphite Light, Dark Theme Graphite, Font JetBrains Mono, Font Size 15 and Font Ligatures on, each with help text underneath.

A few settings worth knowing on day one:

  • Auto Run and Auto Log (General): turn off running-as-you-type, or the automatic logging of top-level expressions.
  • Default Runtime and Default Language (General): Bun and TypeScript out of the box.
  • Vim Keys (Editor): ⌘R still runs in every Vim mode.
  • Loop Limit (Advanced): 2,000 iterations before loop protection stops a loop, adjustable from 100 to 10,000,000.

Settings are saved in settings.json in JSLab's data folder.

The Keybindings editor

Settings → Keybindings lists every command with its shortcut, When it applies (anywhere, the editor or the output) and its Source: Default, User, or Not bound.

To rebind:

  1. Click Change on the command's row.
  2. Press the keys you want (Escape cancels).
  3. It applies straight away, including the shortcut shown in the menu bar. No relaunch.

The recorder follows a few rules: a shortcut needs a modifier unless it's a function key, a few keys are reserved, and if another command already answers to that chord, JSLab warns you and names it. Reset returns one command to its default; Reset All Keybindings returns the whole keymap.

Or edit the JSON

Your changes are saved in keybindings.json, which you can edit by hand (Open keybindings.json is right there). It's a list of rules applied on top of the defaults, in order:

[
  { "key": "cmd+alt+n", "command": "run.start" },
  { "key": "cmd+k", "command": "-output.clear" }
]
Enter fullscreen mode Exit fullscreen mode

The first rule adds ⌥⌘N for Run. The second removes Clear Output's default ⌘K: a - before the command id removes a binding instead of adding one. If the file isn't valid JSON, JSLab falls back to the default keymap until you fix it and relaunch.

And if you can't remember a shortcut at all: ⇧⌘P opens the command palette, which shows every command with its shortcut beside it.

JSLab launches Nov 15. The full Settings reference: https://js-lab.app/docs/settings

Top comments (0)