Escape the Arrow Key Prison: A Developer's Liberation Guide

Intro

Picture this: You're deep in coding flow, fingers dancing across the keyboard, when suddenly - you need to move the cursor. Your hand awkwardly leaves the home row, breaking your concentration. Sound familiar? Today, we're breaking out of the arrow key prison...

The Arrow Key Imprisonment

What are you doing when you need to move the cursor while coding? You are likely moving one of your hands to the arrow keys. This is what I did for a long time, and I got tired of it. Constantly moving your hand takes time; therefore, you are less productive doing that. But I found a way to change this.

How to Move The Cursor Without Arrow Keys

A good way to move the cursor without the arrow keys is to implement custom keyboard shortcuts in VS Code. I guess that in other code editors, you can do a similar thing. I found a question on this theme answered on Stack Overflow. Partly, thanks to this, I know the solution. The exact shortcuts are as follows:

With these custom shortcuts, you will be more effective while typing. But in the beginning, it won't be the case, because you need to get used to it first. There are still cases when you need to use arrow keys, one of them is to choose options from an autocomplete dropdown. And even there, if you type long enough, you will likely only need to press the Enter key if the necessary option is the first one.

Existing Shortcuts

In my case, almost all of the new shortcuts were already used by the system. I checked them and concluded that they had a minimal impact on the overall workflow. Therefore, they could be safely overridden with different commands. You can do the same before customizing shortcuts. This is how you can do that:

1. Identify current shortcut bindings
2. Assess command importance
3. If you need, determine alternative access methods for commands that are on shortcuts we want to override. In my case, I didn't really need to do that at all.
4. Proceed with overriding shortcuts if you like the new configuration

In my case, the Ctrl+I default shortcut opens the emoji picker, but the Ctrl+Shift+I default shortcut also does the same thing. I guess there is a similar story with other shortcuts. The Ctrl+L shortcut by default is used for expanding line selection, but after I added my own keyboard shortcut configuration where I assigned the command that moves the cursor to the right to Ctrl+L, it seems to override the original command without any problems. Maybe user-defined shortcuts have a higher priority.

How to Create Cursor and Word-Level Movement Shortcuts in VS Code

1. Open Keyboard Shortcuts

• Go to File > Preferences > Keyboard Shortcuts

2. Prepare for Remapping

• Click on the Open Keyboard Shortcuts (JSON) icon in the top right corner
• This opens the keybindings.json file

3. Implement Cursor and Word-Level Movement Shortcuts

Before this implementation, it is recommended to make a backup of your original keybindings before making changes, just in case you need to revert.

[
  {
    "key": "ctrl+i",
    "command": "cursorUp",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+k",
    "command": "cursorDown",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+j",
    "command": "cursorLeft",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+l",
    "command": "cursorRight",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+u",
    "command": "cursorWordStartLeft",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+o",
    "command": "cursorWordEndRight",
    "when": "textInputFocus"
  }
]

Conclusion

Here's how you can remap keyboard shortcuts to enhance your coding productivity by minimizing arrow key usage. If you like it, please share this article with someone who might benefit from these coding efficiency tips.

Got questions? Send an email to commitnobug@outlook.com.