VSCode Basics

Here are some basic shortcuts you should learn for highly productive source code editing.

๐Ÿง™ Multiple Selectors

If there’s one shortcut to speed up your coding it’s mastering multiple selectors.

By Mouse Click

VS Code supports multiple cursors for fast simultaneous edits. You can add secondary cursors with โŒฅ+Click.

By Mouse Drag

Example of selecting by mouse drag

You can select multiple selections via a mouse drag by holding down โ‡งโŒฅ

Select mutiple instances of a word

Example of selecting multiple words

โŒ˜D selects the word at the cursor, or the next occurrence of the current selection

Add more cursors

Example of adding more selections

You can also add more cursors with โ‡งโŒ˜L, which will add a selection at each occurrence of the current selected text.

๐Ÿ’จ Shift/Expanding Selection

Example of expanding the current selection

Quickly shrink or expand the current selection. Trigger it with โŒƒโ‡งโŒ˜โ† and โŒƒโ‡งโŒ˜โ†’.

๐Ÿ‘ฉโ€๐Ÿ’ป Code Folding

You can fold regions of source code using the folding icons on the gutter between line numbers and line start.

Folding Example

Shortcuts

These shortcuts will save your wrist some miles:

  • Fold โŒฅโŒ˜[ folds the innermost uncollapsed region at the cursor.
  • Unfold โŒฅโŒ˜] unfolds the collapsed region at the cursor.
  • Toggle Fold โŒ˜K then โŒ˜L folds or unfolds the region at the cursor.
  • Fold All โŒ˜K โŒ˜0 folds all regions in the editor.
  • Unfold All โŒ˜K โŒ˜J unfolds all regions in the editor.

Jim Wardlaw

Developer, Designer, UX Zealot. Ember & Tailwind