VS Code Shortcuts and Tricks to Code Faster

The habits that save the most time

You do not need to memorize a hundred shortcuts. A handful of techniques deliver nearly all of the gain:

• Command palette — every editor feature is reachable by name, no menu hunting.
• Quick navigation — open a file, jump to a function or a line without touching the mouse.
• Multi-cursor — edit several places at once.
• Refactoring — renames and quick fixes that understand code, not just text.
• Snippets and custom keys — repetitive actions become a single keystroke.

Shortcuts below are written as Windows / macOS. Linux mostly matches Windows.

Command palette and file search

A useful detail: the Ctrl+P box accepts prefixes. > turns it into the command palette, @ searches symbols in the file, : jumps to a line. One shortcut covers all of them.

Navigating code

• F12 — go to the definition of a function or class.
• Alt+F12 / Option+F12 — peek the definition inline without leaving the current file.
• Shift+F12 — show every reference to a symbol.
• Alt+← / Ctrl+- — go back to where you were before the jump.
• Ctrl+Tab — switch between open editors.

The loop "F12, read, go back" replaces manual project-wide searching most of the time.

Multi-cursor editing

A typical flow: select a variable name, press Ctrl+D a few times and start typing — every selected occurrence changes. For a column (box) selection, drag with Shift+Alt held (Shift+Option on macOS).

Line editing

• Alt+↑/↓ / Option+↑/↓ — move a line.
• Shift+Alt+↑/↓ / Shift+Option+↑/↓ — duplicate a line.
• Ctrl+Shift+K / Cmd+Shift+K — delete a line.
• Ctrl+/ / Cmd+/ — toggle a comment.
• Shift+Alt+F / Shift+Option+F — format the document.

Refactoring

• F2 — rename a symbol across the project. Unlike find-and-replace, the editor respects scope and leaves same-named variables elsewhere alone.
• Ctrl+. / Cmd+. — quick fixes and refactorings: add a missing import, extract code into a function or constant, fix a linter warning.

What is available depends on the language and installed extensions. TypeScript and JavaScript get a rich set out of the box; other languages need their language extension.

Your own snippets

A snippet is a template that expands from a short prefix. Open the command palette, type "snippets" and choose to configure snippets for a language or for the current project.

{
  "React component": {
    "prefix": "rfc",
    "body": [
      "export function ${1:Component}() {",
      "  return <div>$0</div>;",
      "}"
    ],
    "description": "React function component"
  }
}

$1 is the first tab stop, $0 is where the cursor ends up. Project-level snippets live in the .vscode folder and get committed, so the whole team can use them.

Custom keybindings

Open the keyboard shortcuts editor with Ctrl+K Ctrl+S / Cmd+K Cmd+S. It shows which keys are already taken. For precise control, open the JSON view (icon in the top-right corner of the shortcuts editor):

[
  {
    "key": "shift+alt+d",
    "command": "editor.action.duplicateSelection",
    "when": "editorTextFocus"
  }
]

The when clause limits where the binding applies and helps avoid conflicts.

Common mistakes

• Trying to learn everything at once. Pick 3–4 shortcuts per week until they become muscle memory.
• Clicking through menus for actions that are one search away in the command palette.
• Renaming with find-and-replace instead of F2 and catching unrelated matches.
• Binding custom keys on top of operating system shortcuts.