The Dev Log › Tips & Cheat Codes

VS Code Shortcuts and Settings That Make Me Faster Every Day

By Jezer Niel Blanca, Full Stack Developer · September 9, 2026 · 6 min read

The VS Code shortcuts, settings, extensions and snippets I rely on for Laravel, Vue and Tailwind work, and how to build them into muscle memory.

I spend most of my working day inside a code editor, so small improvements compound fast. A shortcut that saves three seconds, used a hundred times a day, adds up to real time every week. More importantly, good shortcuts keep you in flow: your hands stay on the keyboard and your brain stays on the problem. This is the set of VS Code shortcuts, settings and extensions I rely on for Laravel, Vue and Tailwind work.

Shortcuts below are written for macOS. On Windows and Linux, swap Cmd for Ctrl and Option for Alt in most cases. If one doesn't match your setup, open the Keyboard Shortcuts editor with Cmd+K Cmd+S and search for the command name.

Navigation Shortcuts I Use All Day

Getting to the right file and the right line quickly is the biggest win, so these come first:

Cmd+P opens Quick Open. Type a few letters of a file name, like postcon for PostController.php, and hit Enter.
Cmd+Shift+P opens the Command Palette, where every command in VS Code lives. If you forget a shortcut, you can always find the command here.
Cmd+Shift+O jumps to a symbol in the current file. Start typing a method name and you're there. The same list is available from Quick Open by typing @.
Cmd+T searches symbols across the whole workspace, which is perfect for finding a class or method without knowing its file.
Ctrl+G goes to a specific line number, handy when reading a stack trace.
F12 goes to definition, and Shift+F12 shows every reference.
Ctrl+- goes back to where you were before jumping. This one pairs perfectly with F12.
Cmd+Shift+F searches across all files, with support for regular expressions and include or exclude patterns.

The fastest developers aren't typing faster. They're spending less time looking for things.

Editing Shortcuts That Feel Like Superpowers

Once you're in the right place, these make changes quicker and safer:

Cmd+D selects the next occurrence of the current word. Press it repeatedly to add more cursors, then type once to edit them all.
Cmd+Shift+L selects every occurrence in the file at once.
Option+Click adds a cursor wherever you click. Cmd+Option+Down adds a cursor on the line below.
Option+Up/Down moves the current line or selection up and down.
Shift+Option+Down duplicates the current line.
Cmd+Shift+K deletes the whole line.
Cmd+/ toggles a line comment.
F2 renames a symbol everywhere it's used. With a good language server, this is far safer than find-and-replace.
Cmd+. opens Quick Fix, which offers things like importing a missing class.

Multi-Cursor in Practice

Say you've pasted a list of column names and want to turn them into a PHP array. Select the lines, press Shift+Option+I to put a cursor at the end of each line, then use Cmd+Left to jump to the start and type your quotes. A few keystrokes replace what would otherwise be a lot of repetitive typing.

Settings Worth Changing

Open your user settings JSON from the Command Palette with Preferences: Open User Settings (JSON). These are the settings I change on every new machine:

{
  "editor.formatOnSave": true,
  "editor.linkedEditing": true,
  "editor.stickyScroll.enabled": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "boundary",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.autoSave": "onFocusChange",
  "workbench.editor.enablePreview": false,
  "explorer.compactFolders": false,
  "terminal.integrated.defaultLocation": "editor"
}

What they do, briefly:

formatOnSave keeps formatting consistent without thinking about it.
linkedEditing renames the closing HTML tag when you edit the opening one, which is great in Vue templates.
stickyScroll pins the current class and method names at the top of the editor while you scroll through long files.
enablePreview: false stops single-clicked files from replacing each other in the same tab.
compactFolders: false shows nested folders like app/Http/Controllers as a real tree, which is easier to scan in Laravel projects.

Per-Language and Per-Project Settings

You can scope settings to a language. For example, to use Prettier only for Vue and JavaScript files:

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

For team projects, put shared settings in .vscode/settings.json inside the repository. Everyone who opens the project gets the same formatting behaviour, and personal preferences stay in user settings.

Extensions for the Laravel, Vue and Tailwind Stack

I keep my extension list short, because every extension costs a little startup time and memory. These are the ones that earn their place:

PHP Intelephense for fast PHP autocompletion, go to definition and diagnostics.
The official Laravel extension for route, view, config and translation autocompletion inside Laravel projects.
Vue - Official for Vue 3 single-file component support, including TypeScript and template type checking.
Tailwind CSS IntelliSense for class autocompletion, hover previews and linting.
Prettier for formatting JavaScript, Vue and CSS.
EditorConfig so editor behaviour follows the project's .editorconfig file.
GitLens or the built-in Source Control view for seeing who changed a line and why.

For PHP formatting, I prefer running Laravel Pint from the terminal or a pre-commit step so the result is identical for everyone, regardless of editor:

vendor/bin/pint --dirty

Terminal, Snippets and Tasks

A few more features that quietly save time:

**Ctrl+** toggles the integrated terminal. I keep one terminal for composer run dev` and another for Artisan and Git.
User snippets turn repeated boilerplate into a short prefix. Open Snippets: Configure Snippets from the Command Palette and pick a language:

{
  "Vue script setup": {
    "prefix": "vss",
    "body": [
      "<script setup>",
      "$1",
      "</script>",
      "",
      "<template>",
      "  <div>$2</div>",
      "</template>"
    ],
    "description": "Vue single-file component with script setup"
  }
}

Settings Sync, built into VS Code, keeps settings, keybindings, snippets and extensions the same across machines.
Zen Mode with Cmd+K Z hides everything except the code when you need deep focus.

Wrapping up

You don't need to learn every shortcut at once. Pick three from this list, use them deliberately for a week until they're muscle memory, then pick three more. Pair that with a handful of sensible settings and a lean set of extensions, and your editor starts working with you instead of getting in the way. And if you have a product idea that needs a fast, focused team behind it, I'd love to build it with you and my team.

Tags: VS Code, Productivity, Shortcuts, Tooling