Published at

How to make VSCode / Cursor feel like you are keyboard gaming during development

How to make VSCode / Cursor feel like you are keyboard gaming during development

I share my unique keyboard shortcuts that make me very swift during develpoment, while rarely touching my touchpad

Authors
  • Name
    Joachim Bülow
    Twitter
  • Cofounder and CTO at Doubble
Sharing is caring!
Table of Contents

Programming should be fun - and it can be, if you have the right development environment

I am not going to talk about vscode vs vim - as i believe either has their strenghts.

One thing many people are missing out on, though, are ways to optimize the VSCode / Cursor workflow to function in ways closer to NeoVim. Specifically, having keyboard shortcuts for the usual navigation patterns is absolutely paramount for swift development - and we can make it even more fun by introducing a few extensions and special settings.

Settings overview

First of all - if you just want to paste something and figure it out, these are the settings needed:

// Place your key bindings in this file to override the defaults
[
    {
        "key": "cmd+i",
        "command": "composerMode.agent"
    },
    {
        "key": "ctrl+tab",
        "command": "workbench.action.nextEditor"
    },
    {
        "key": "ctrl+shift+tab",
        "command": "workbench.action.previousEditor"
    },
    {
        "key": "cmd+p",
        "command": "workbench.action.quickOpenPreviousEditor"
    },
    {
        "key": "cmd+shift+r",
        "command": "editor.action.rename"
    },
    {
        "key": "ctrl+shift+cmd+left",
        "command": "workbench.action.navigateBack",
        "when": "canNavigateBack"
    },
    {
        "key": "ctrl+shift+cmd+right",
        "command": "workbench.action.navigateForward",
        "when": "canNavigateForward"
    },
    {
        "key": "ctrl+shift+cmd+down",
        "command": "scroll-faster.down",
        "when": "textInputFocus"
    },
    {
        "key": "ctrl+shift+cmd+up",
        "command": "scroll-faster.up",
        "when": "textInputFocus"
    },
    {
      "key": "ctrl+shift+cmd+backspace",
      "command": "editor.action.revealDefinition",
      "when": "editorHasDefinitionProvider && editorTextFocus && !isInEmbeddedEditor"
    },
    {
        "key": "ctrl+shift+cmd+a",
        "command": "workbench.action.debug.restart",
        "when": "inDebugMode"
    },
    {
        "key": "ctrl+shift+cmd+s",
        "command": "workbench.action.debug.continue",
        "when": "debugState == 'stopped'"
    },
    {
        "key": "ctrl+shift+cmd+z",
        "command": "workbench.action.debug.stepInto",
        "when": "debugState != 'inactive'"
    },
    {
        "key": "ctrl+shift+cmd+w",
        "command": "workbench.action.debug.stepOut",
        "when": "debugState == 'stopped'"
    },
    {
        "key": "ctrl+shift+cmd+d",
        "command": "workbench.action.debug.stepOver",
        "when": "debugState == 'stopped'"
    },
    {
        "key": "ctrl+shift+cmd+-", // or whatever binding you choose
        "command": "cursorMove",
        "args": {
            "to": "viewPortCenter"
        }
    },
    {
        "key": "ctrl+shift+cmd+enter", // or whatever binding you choose
        "command": "cursorMove",
        "args": {
            "to": "viewPortCenter"
        }
    },
    {
        "key": "ctrl+shift+cmd+q",
        "command": "debug.removeBreakpoint",
        "when": "breakpointsFocused && !breakpointInputFocused"
    },
    {
        "key": "ctrl+shift+cmd+e",
        "command": "editor.debug.action.toggleBreakpoint",
        "when": "debuggersAvailable && editorTextFocus"
    },
    {
        "key": "cmd+i",
        "command": "composerMode.agent"
    }
]

Explanations

The key to this workflow is the combination of using ctrl+shift+cmd to enable speedy navigation.

For example, using "ctrl+shift+cmd+right" and "ctrl+shift+cmd+left", allows us to quickly jump between cursor points in history. For "command": "scroll-faster.up", (and down) we enable to scroll-faster plugin to aid us in scrolling fast up and down. "ctrl+shift+cmd+backspace" allows to jump into the definition of a function. Pair this with left and right, and you will navigate into files and back at the speed of light.

These five keys and commands are absolutely key to navigating in a way that feel like you are exploring a universe of code.

Debugging

We enable the classic WASD gaming keyboard pattern with the ctrl+shift+cmd commands to enable debugging in a powerful way. Going “left” means restarting your debugger, going “center” (s) means continue (e.g. when in a breakpoint), with d stepping over, w stepping out of, and z stepping into.

This makes debugging much more fun, and you can pair it with breakpoint toggles using e to quickly enable and disable the breakpoints.

Other nice patterns

Naming is hard - quickly renaming references should not be.

{
    "key": "cmd+shift+r",
    "command": "editor.action.rename"
},

allows you to quickly rename a variable or function.

Navigating the previous file and browsing files can double using the following shortcut.

{
    "key": "cmd+p",
    "command": "workbench.action.quickOpenPreviousEditor"
},

This makes sure your usual cmd+p suggestion starts on the previously selected editor.

That’s all for today folks

Sharing is caring!