Owen Conti 🇨🇦

Posted on Apr 13, 2019 • Updated on Apr 14, 2019 • Originally published at owenconti.com

5 Keyboard Shortcuts to Navigate Your Code Faster

#beginners #discuss #tutorial #tips

Note: This is a crosspost from my blog. Find the original article here: https://owenconti.com/tips/5-keyboard-shortcuts-to-navigate-your-code-faster/

I also have a video version of this article available: https://dev.to/owenconti/video-follow-up-5-keyboard-shortcuts-to-navigate-your-code-faster-2mne

Here are 5 keyboard shortcuts you can implement in any IDE to help navigate your code faster.

I use VS Code as my IDE, but these shortcuts can be applied to any editor.

The keyboard shortcuts I list in this article are OSX specific, but they should transfer over to Windows if you replace:

CMD with CTRL
OPTION with ALT
CTRL stays as CTRL

Preface: These shortcuts may not apply to some editors such as Vim, etc.

Delete line(s)

Before you utilize a delete line shortcut, you find yourself highlighting an entire line and then pressing backspace or delete. This works, however a shortcut can make it much faster. This shortcut also works on multiple lines, if you have multiple highlighted.

VSCode default: Shift + CMD + K
My keybinding: CMD + D

I prefer my keybinding over the VS Code default because I can press it with just my left hand.

Move line(s)

How often do you find yourself copy/pasting lines to move them up or down throughout a line? With this keyboard shortcut, you can simply use your arrow keys to move lines around.

VS Code default: OPTION + up/down arrow key
My keybinding: same as VS Code default

I stick with the VS Code default for this one because it's what I started out using.

Go to line

A lot of people don't realize almost all text editors have a Go To Line utility built in. This is really helpful when you are dealing with larger files and need to find a specific line (maybe from the result of a stack trace while debugging).

VS Code default: CTRL + G
My keybinding: CMD + L

I prefer my keybinding because "Line" starts with "L" so it's easier for me to remember CMD + L than CTRL + G.

Go back/forward

Let's imagine you have 5 files open and you're trying to follow the code flow between files. Now you want to go back to the previous file and re-read a line, but you can't remember which file it was or what line number.

This shortcut will move your cursor to where it was before/after, even across files. Think of it as an "undo/redo" for your cursor.

Go back

VS Code default: CTRL + -
My keybinding: CMD + [

Go forward

VS Code default: CTRL + SHIFT + -
My keybinding: CMD + ]

I prefer my keybinding because it is the default in Eclipse, which is where I learned this shortcut. I also prefer the difference of [ and ] instead of using SHIFT as a modifier.

Start/end of word

This one is a game changer. How many times do you find yourself holding down left arrow while the cursor slowly moves towards the middle of the line so you can fix a typo or replace a word?

With the start/end of word shortcut (sometimes called Cursor Word Start/End), you can quickly navigate one word at a time left/right on a line without holding arrow keys or having to use your mouse.

Note: underscores are considered part of a word while hyphens are not.

VS Code default: OPTION + left/right arrow key
My keybinding: same as VS Code default

Bonus shortcuts!

I've included two extra shortcuts which are very similar to the Start/end of word shortcut.

Start/end of line

In addition to the start/end of word, you can also quickly go to the start/end of a line by using CMD instead of OPTION:

CMD + left/right arrow key

Highlight characters as you use start/end of word/line

Let's say you have some code that looks like this, and your cursor is at the end of the word "world":

const name = "Owen";
console.log(`Hello world!`);

Now you want to replace "world" with the name variable. You have two options to quickly select "world":

Use your mouse and double click "world" 🤮
Use the start/end of word shortcut to quickly highlight "world"

Using the shortcut, you would hold SHIFT + OPTION and then hit the LEFT ARROW key to highlight world. This would highlight just the word "world", which you could then replace with the variable name.

Summary

To summarize what we learned today, here's what I recommend:

Delete line(s): CMD + D
Move line(s): OPTION + UP or DOWN ARROW
Go to line: CMD + L
Go back/forward: CMD + [ or ]
Start/end of word: OPTION + LEFT or RIGHT ARROW
Highlight characters with start/end of word: SHIFT + OPTION + LEFT or RIGHT ARROW

VS Code keybindings.json file

Here's a copy of my keybindings.json file for VS Code if you want to take a look at the rest of my keybindings:

[
  {
    key: "cmd+d",
    command: "editor.action.deleteLines",
    when: "editorTextFocus"
  },
  {
    key: "cmd+t",
    command: "workbench.action.quickOpen"
  },
  {
    key: "cmd+[",
    command: "workbench.action.navigateBack"
  },
  {
    key: "cmd+]",
    command: "workbench.action.navigateForward"
  },
  {
    key: "shift+cmd+b",
    command: "workbench.action.tasks.runTask"
  },
  {
    key: "alt+`",
    command: "workbench.action.terminal.focusPrevious"
  },
  {
    key: "ctrl+cmd+a",
    command: "-extension.align",
    when: "editorTextFocus"
  },
  {
    key: "cmd+\\",
    command: "workbench.files.action.showActiveFileInExplorer"
  },
  {
    key: "cmd+l",
    command: "workbench.action.gotoLine"
  }
];