SECRET OF CSS

5 Time-Saving VS Code Shortcuts And How To Learn Them Quickly | David Amos


And how to learn them quickly through purposeful practice

Image by author (with Canva)

How much time do you spend moving your hand between your keyboard and mouse?

One estimate puts the number at sixteen minutes a day. Eight whole days every year! Although the estimate isn’t scientific, I don’t think it’s far-fetched. I’d guess that the number is even higher for coders. Keyboard shortcuts are essential for developers. There’s no shortage of articles about shortcuts, but few provide any tips for practicing them.

Here are five of my most-used VS Code shortcuts and how I practice them to make them stick.

Move your cursor to a new “word” on the current line without using your mouse and without moving character by character.

  • macOS: Option + ←, Option + →
  • Linux: Ctrl + ←, Ctrl + →
  • Windows: Linux: Ctrl + ←, Ctrl + →

Here’s what it looks like in action:

Combine this with shortcuts to move your cursor to the beginning or end of a line for faster navigation. (macOS: Cmd + ←Cmd + →; Windows: Home and End)

What is a “word?”

Generally speaking, words are separated by spaces and underscores.

Commas, periods, and other punctuation are often ignored. However, VS Code treats operators such as != and && as words and skips over nested braces to the next identifier or operator.

How to practice it

Time: 1–2 minutes
Frequency: Twice a day for at least five days

Open any file in any codebase. Pick a line and move your cursor to somewhere within the line. Next, pick a “word” in the line and use the shortcut to move your cursor to it. Repeat this with different lines and different “words.”

Instead of selecting a line, copying it, inserting a new line above or below, and pasting it, you can perform the entire set of actions with a single keystroke.

  • macOS: Shift + Option + ↑, Shift + Option + ↓
  • Linux: Shift + Alt + ↑, Shift + Alt + ↓
  • Windows: Shift + Alt + ↑, Shift + Alt + ↓

This works with multiple lines selected, so you can quickly repeat entire chunks of text.

Here’s what it looks like:

This shortcut is handy when creating an array of similarly structured items. It’s also great for working with configuration files, XML files, JSON files, or any other code-adjacent file with a repetitive structure.

Time: 2 minutes
Frequency: Twice daily for at least five days

Make a folder containing copies of YAML, JSON, XML, or other structured text files you work with frequently. Pick one or two and spend a couple of minutes adding new items using the shortcut.

Instead of selecting a line, deleting it, and pressing backspace to remove the blank line, you can do all that in one step.

  • macOS: Shift + Cmd + K
  • Linux: Shift + Ctrl + K
  • Windows: Shift + Ctrl + K

Here’s how it works:

This works with multiple lines selected, so you can quickly remove an entire block of code if needed.

Time: 1 minute
Frequency: Twice daily for at least five days

Open any file you want and go to town deleting code. It’s cathartic, isn’t it?

Instead of manually finding all of the instances of a variable and changing them, or even using find and replace, use VS Code’s built-in variable renaming feature.

  • macOS: F2
  • Linux: F2
  • Windows: F2

This also works with function names, class names, and other identifiers.

Here’s what it looks like in action:

VS Code can infer the scope for which to apply the change. If you want, you can press Shift + Enter from the rename window to preview the changes.

Time: 1–2 minutes
Frequency: Twice daily for at least five days

Clone a repository from GitHub, or use one of your own, and practice renaming things with the shortcut.

Instead of searching for references to a function in a codebase, you can take a quick peek at all references without leaving your current file.

  • macOS: Shift + F12
  • Linux: Shift + F12
  • Windows: Alt + F12

Here it is in action:

Time: 1–2 minutes
Frequency: Twice daily for at least five days

Clone a repository from GitHub and practice looking up references of things using the shortcut.

The practice routines I’ve suggested here are a good start.

To practice effectively, research suggests that you should vary the content of your practice each time. Practice on different code bases and file types. Set different objectives for yourself. Practice often and space sessions apart by several hours.

Do that, and those keystrokes will become muscle memory in no time.



News Credit

%d bloggers like this: