Visual Studio Code has become the default editor for most web developers, and for good reason. It is fast, extensible, and has a massive ecosystem. But many developers only scratch the surface of what it can do.

Here are the tips, shortcuts, and extensions that have made the biggest difference in my daily workflow.

Keyboard Shortcuts That Matter

Learning keyboard shortcuts is the highest-leverage productivity investment you can make. You use your editor for hours every day - even saving two seconds per action compounds significantly.

These are the ones worth memorizing first:

Cmd+P          - Quick open file by name
Cmd+Shift+P    - Command palette (access any VS Code command)
Cmd+B          - Toggle sidebar
Cmd+`          - Toggle integrated terminal
Cmd+Shift+F    - Search across all files
Cmd+D          - Select next occurrence of current word
Cmd+Shift+L    - Select all occurrences of current word
Alt+Up/Down    - Move line up/down
Cmd+Shift+K    - Delete entire line
Cmd+/          - Toggle line comment
Cmd+Shift+[    - Fold code block
Cmd+Shift+]    - Unfold code block

Start with Cmd+P and Cmd+Shift+P. These two alone change how you interact with the editor. Instead of clicking through menus or the file tree, you type a few characters and hit enter.

Multi-Cursor Editing

Multi-cursor is one of the most powerful features in VS Code, yet many developers never use it.

Alt+Click          - Add cursor at click position
Cmd+D              - Add cursor at next match of selection
Cmd+Shift+L        - Add cursor at every match of selection
Cmd+Alt+Up/Down    - Add cursor on line above/below

Practical example: say you have a list of variables you need to wrap in quotes. Select the first variable name, press Cmd+D repeatedly to select each occurrence, then type the quotes. All instances update simultaneously.

Another common use case is renaming a variable across a block. Select it, press Cmd+Shift+L to select all occurrences, and type the new name. This is faster than find-and-replace for small, localized changes.

Essential Extensions

Prettier - Code Formatter

Prettier automatically formats your code on save. No more arguing about tabs vs spaces or where to put braces. Configure it once and forget about formatting forever.

Add this to your VS Code settings:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

ESLint

ESLint catches bugs and enforces code style rules as you type. The VS Code extension underlines problems directly in the editor and can auto-fix many issues on save.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

GitLens

GitLens adds inline git blame annotations so you can see who changed each line and when. It also provides a rich sidebar view of the file's git history, letting you compare revisions and understand how code evolved.

The inline blame annotation is subtle - it appears at the end of the current line in muted text. It answers "who wrote this and why" without leaving the editor.

Error Lens

Error Lens shows error and warning messages inline, right next to the problematic line. Instead of hovering over a red squiggle to read the message, you see it immediately. This small change speeds up debugging noticeably.

The Integrated Terminal

Many developers keep a separate terminal window alongside VS Code. The integrated terminal (Cmd+`) is worth using instead because:

  • It opens in the project root automatically
  • You can split terminals side by side
  • Clickable file paths in error output open the file in the editor
  • It shares the same window, so you are not switching between applications

You can also create terminal profiles for different tasks. For example, one profile for running your dev server and another for git commands.

Settings Sync

VS Code has built-in settings sync (Settings > Turn on Settings Sync). It syncs your settings, keybindings, extensions, and snippets across machines using your GitHub or Microsoft account.

This means you can set up a new machine in minutes. Install VS Code, sign in, and everything is exactly how you had it.

Workspace Settings

VS Code supports project-level settings through a .vscode/settings.json file. This is useful for teams because you can commit editor settings to the repo:

// .vscode/settings.json
{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "files.exclude": {
    "node_modules": true,
    "dist": true
  },
  "search.exclude": {
    "node_modules": true,
    "package-lock.json": true
  }
}

This ensures everyone on the team has consistent editor behavior without requiring manual setup.

Snippets

Custom snippets let you expand short abbreviations into full code blocks. Go to Code > Preferences > User Snippets and create snippets for patterns you type frequently:

{
  "Console Log": {
    "prefix": "cl",
    "body": "console.log('$1:', $1);",
    "description": "Console log with label"
  }
}

Type cl, press Tab, and the snippet expands. The cursor lands at $1 so you can type the variable name, and it fills in both the label and the value.

Start Small

Do not try to adopt all of these at once. Pick one shortcut or one extension per week. Use it until it becomes muscle memory, then add the next one. Small, consistent improvements beat a one-time overhaul that does not stick.