Pane Edges

VS Code extension that enables unified directional navigation across editor groups, sidebar, and panel — like Zed or tmux.

The Problem

VS Code has separate commands for navigating between editor groups (focusLeftGroup, focusBelowGroup, etc.) and focusing the sidebar or panel (focusSideBar, focusPanel). There's no single "move focus left" command that works across all regions. If you're in the leftmost editor group and press your "focus left" keybinding, nothing happens — it won't jump to the sidebar.

The Solution

Pane Edges provides a paneEdges.navigate command that checks if the active editor group is at the edge of the layout. If it is, it executes a fallback command (like focusing the sidebar or panel). If it isn't, it navigates to the adjacent editor group.

This works with any layout — horizontal splits, vertical splits, 2x2 grids, etc.

Usage

The extension provides one command:

paneEdges.navigate

Example keybindings

Add these to your keybindings.json:

[
  // ctrl+down: navigate to split below, or panel if at bottom edge
  {
    "key": "ctrl+down",
    "command": "paneEdges.navigate",
    "args": { "direction": "down", "fallback": "workbench.action.focusPanel" },
    "when": "editorFocus && panelVisible"
  },
  {
    "key": "ctrl+down",
    "command": "paneEdges.navigate",
    "args": { "direction": "down" },
    "when": "editorFocus && !panelVisible"
  },

  // ctrl+up: navigate to split above
  {
    "key": "ctrl+up",
    "command": "paneEdges.navigate",
    "args": { "direction": "up" },
    "when": "editorFocus"
  },
  {
    "key": "ctrl+up",
    "command": "workbench.action.focusActiveEditorGroup",
    "when": "panelFocus"
  },

  // ctrl+left: navigate to split left, or sidebar if at left edge
  {
    "key": "ctrl+left",
    "command": "paneEdges.navigate",
    "args": { "direction": "left", "fallback": "workbench.action.focusSideBar" },
    "when": "editorFocus && sideBarVisible"
  },
  {
    "key": "ctrl+left",
    "command": "paneEdges.navigate",
    "args": { "direction": "left" },
    "when": "editorFocus && !sideBarVisible"
  },
  {
    "key": "ctrl+left",
    "command": "workbench.action.focusActiveEditorGroup",
    "when": "auxiliaryBarFocus"
  },

  // ctrl+right: navigate to split right, or auxiliary bar if at right edge
  {
    "key": "ctrl+right",
    "command": "paneEdges.navigate",
    "args": { "direction": "right", "fallback": "workbench.action.focusAuxiliaryBar" },
    "when": "editorFocus && auxiliaryBarVisible"
  },
  {
    "key": "ctrl+right",
    "command": "paneEdges.navigate",
    "args": { "direction": "right" },
    "when": "editorFocus && !auxiliaryBarVisible"
  },
  {
    "key": "ctrl+right",
    "command": "workbench.action.focusActiveEditorGroup",
    "when": "sideBarFocus"
  },
  {
    "key": "ctrl+right",
    "command": "workbench.action.focusActiveEditorGroup",
    "when": "panelFocus"
  }
]

Terminal navigation

If you want ctrl+arrow to work from the terminal, add the commands to your settings.json:

"terminal.integrated.commandsToSkipShell": [
  "paneEdges.navigate",
  "workbench.action.focusSideBar",
  "workbench.action.focusActiveEditorGroup",
  "workbench.action.focusPanel",
  "workbench.action.focusAuxiliaryBar"
]

Debugging

Run "Pane Edges: Debug Layout Info" from the command palette to see the current layout tree, computed bounds, and edge detection results.