Apps/Visual Studio Code
Visual Studio Code logo

Visual Studio Code

Run, debug, commit from one row.
Role DeveloperFollows com.microsoft.VSCodeLayout 31 controlsThemes Q Navy · Razer Huntsman RGB

Palette, save and find; terminal, format, go to definition and rename; Copilot, chat and fix; split, zen, problems and explorer; run, debug, next error and Git. Two scroll wheels, one vertical and one horizontal, and a trackpad sit beside the keys. Commands without a fixed shortcut are pressed as menu items by name.

Visual Studio Code layout in the Q Navy theme
Navy aluminium and pudding caps, Run and Palette in red
The layout

Every control, explained.

Point at a key on the pad above or on a row below: both light up. These are the keys of the built-in VS Code layout and what each one sends to the Mac.

CommentMenu: Edit ▸ Toggle Line Comment
Palette⇧⌘P
Save⌘S
Save All⌥⌘S
Find⌘F
Replace⌥⌘F
TerminalMenu: View ▸ Terminal
Format⌥⇧F
Go DefF12
RenameF2
Doc End⌘↓
Doc Top⌘↑
Copilot⌘I
Chat⌃⌘I
Fix⌘.
Sidebar⌘B
SplitMenu: View ▸ Editor Layout ▸ Split Right
ZenMenu: View ▸ Appearance ▸ Zen Mode
Problems⇧⌘M
Explorer⇧⌘E
Run⌃F5
DebugF5
Line ↑⌥↑
Line ↓⌥↓
Dup Line⌥⇧↓
Del Line⇧⌘K
Next ErrF8
Git⌃⇧G
Scroll wheelScrolls the window under the pointer1 × 2 cells
Scroll wheelScrolls the window under the pointer1 × 2 cells
TrackpadMoves the Mac pointer · two fingers scroll · tap clicks4 × 3 cells
Controls

More than keys.

Two scroll wheels
Two scroll wheels

A vertical roller for long files and a horizontal one for wide lines.

Trackpad
Trackpad

Pointer, two-finger scroll and tap to click over the 4 × 3 area.

Integration

What the Mac and the pad share.

On the Mac

  • Follows VS Code, VS Code Insiders and Cursor
  • Terminal, Split and Zen are menu items, so they work with your own keybindings
  • Long-press a key to target VS Code while you read docs in the browser

The VS Code plugin

  • VS Code layout
  • Menu items: Edit ▸ Toggle Line Comment, View ▸ Terminal, View ▸ Editor Layout ▸ Split Right, View ▸ Appearance ▸ Zen Mode
  • Q Navy theme suggestion

It may

  • Keys and menu items in VS Code
Macros

Ideas to start from.

Build these in Settings ▸ Macros with blocks, then put them on a key, a Siri phrase or a trigger. Steps in bold are what you fill in.

Ship it

WHEN Key on the pad
Press ⌥⌘S (save all)
Press ⌃⇧G (Source Control)
Type {{date}} changes
Press ⌘Return (commit)

Code mode

WHEN VS Code comes to the front
Set volume 20
Menu Window ▸ Move & Resize ▸ Fill
Pad: show the VS Code layout
Themes

Dress it like the app.

Any of the 104 themes works on this layout. Pin one to this app and only VS Code wears it.

Q Navy theme
Q NavyMechanical
Razer Huntsman RGB theme
Razer Huntsman RGBIconic Hardware
Cyberpunk Night City theme
Cyberpunk Night CityCult Games
Apple II theme
Apple IIRetro
More apps

The pad follows you.

Final Cut ProPhotoshopOBS StudioTeamsClaudeLogic ProExcelBlenderSpotify
Get iMacroPadHow layouts work