Editor Shortcuts and Multi Cursor Editing

Concept

Most editing time goes on repetitive changes: renaming a class in nine places, adding an attribute to every list item, reordering lines. Multi cursor editing removes almost all of it.

The shortcuts below are VS Code defaults. Every current editor has equivalents, usually with the same keys.

Multi cursor

Ctrl D is the one to learn first. Put the cursor on a class name, press it repeatedly to select each occurrence, then type once to rename all of them.

Adding an attribute to every list item

<li>Design</li>
<li>Data science</li>
<li>Civil</li>

Select the three lines, press Shift Alt I to put a cursor at the end of each, then use Home and arrow keys to reach the right position and type once.

Line editing

Moving a line with Alt and an arrow reindents it automatically, which makes reordering markup safe.

Selection

Expand selection is invaluable in nested markup: press it repeatedly and the selection grows from the word, to the attribute, to the tag, to the whole element.

HTML specific

Folding to level two collapses a long page into its major sections, which makes the structure visible at a glance and is the fastest way to spot a badly nested block.

Navigation

Ctrl P takes fuzzy input, so typing ind finds index.html. Once the habit forms, the file explorer becomes almost unnecessary.

Search and replace

Regular expressions in replace

Find:     <img([^>]*)>
Replace:  <img$1 loading="lazy">

Find:     class="btn (w+)"
Replace:  class="button button--$1"

Find:     <h3>(.*?)</h3>
Replace:  <h2>$1</h2>

$1 refers to the first captured group. Always review the matches before replacing across a project - a regular expression that is slightly too greedy can rewrite a great deal in one keystroke.

Two settings worth changing on day one

{
  "editor.formatOnSave": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.linkedEditing": true,
  "emmet.triggerExpansionOnTab": true,
  "editor.renderWhitespace": "boundary"
}

linkedEditing is the one people miss: editing an opening tag name updates the closing tag automatically.

Important rules

• Escape always returns to a single cursor.
• Multi cursor edits apply everywhere simultaneously, so mistakes multiply too.
• Project wide replace is not undoable file by file. Review first.
• Format on save keeps a project consistent without anyone thinking about it.
• Shortcuts are rebindable; the defaults are only a starting point.

Common mistakes

• Renaming by hand what Ctrl D would do in three keystrokes.
• Using Ctrl Shift L without checking every occurrence should change.
• Project wide regular expression replace with no review.
• Never turning on format on save, then arguing about indentation in review.
• Using the mouse to navigate files.

Best practices

• Learn five shortcuts a week rather than all of them at once.
• Use Ctrl D for renames within a file.
• Use Ctrl P instead of the file tree.
• Turn on format on save and linked editing immediately.
• Review every match before a project wide replace.
• Commit before any large mechanical change.

Practice

1. Rename a class in twelve places using Ctrl D only.
2. Add loading="lazy" to every image in a file with a regular expression replace.
3. Fold a long page to level two and describe its structure from the folded view.
4. Navigate a project for ten minutes without touching the file explorer.