iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Examples

By · Reviewed & last updated · Part of VS Code Tutorial

A short tour of the VS Code features you should know exist: workspace files, multi-cursor magic, integrated terminal profiles, source control inline diffs, tasks, and snippets. None of them are exotic — but most teams use about a third of what is shipped.

Eight VS Code tricks that pay back in minutes

EXAMPLE
// 1) Multi-cursor — the productivity unlock
// - Alt+Click             add a cursor anywhere
// - Ctrl+Alt+Up/Down      add cursors above/below
// - Ctrl+D                add next occurrence of the current selection
// - Ctrl+Shift+L          select ALL occurrences in the file
// - Ctrl+L                expand selection by line; chain it for blocks
// - Alt+Shift+Drag        column (rectangular) selection

// 2) Command palette is the menu
// Ctrl+Shift+P  opens it. Type a few letters of any action. If you do not
// remember the keybinding, type the verb: 'format', 'sort lines', 'fold all'.

// 3) Integrated terminal profiles — one keystroke per shell
// settings.json
{
  "terminal.integrated.profiles.windows": {
    "PowerShell": { "source": "PowerShell", "args": ["-NoLogo"] },
    "Git Bash":   { "source": "Git Bash" }
  },
  "terminal.integrated.defaultProfile.windows": "PowerShell"
}

// 4) Tasks: shortcut for npm scripts, pytest, etc.
// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "test:watch",
      "type": "shell",
      "command": "npm test -- --watch",
      "presentation": { "reveal": "always", "panel": "dedicated" },
      "problemMatcher": []
    }
  ]
}
// Bind Ctrl+Alt+T to 'workbench.action.tasks.runTask' for one-keystroke launch.

// 5) Snippets — small, lifechanging
// File > Preferences > Configure User Snippets > new global snippet
{
  "console.log var name": {
    "prefix": "clg",
    "body": ["console.log('$1:', $1);"],
    "description": "console.log with variable name"
  },
  "React function component": {
    "prefix": "rfc",
    "body": [
      "export default function ${1:Component}() {",
      "  return (<div>$0</div>);",
      "}"
    ]
  }
}

// 6) Source control — inline diffs and 'staged changes'
// Click a line gutter to stage or unstage just that line.
// The Source Control view shows uncommitted changes per file.
// 'Git: Open Repository in Source Control' opens an existing repo as a workspace.

// 7) Workspace file (.code-workspace) for multi-root projects
// File > Save Workspace As... — captures folders + shared settings + tasks
// in one JSON file you can commit. Open with: code shop.code-workspace.

// 8) Diff and merge as a CLI tool
//   code --diff a.txt b.txt
//   code --wait    (use as your git editor: git config --global core.editor 'code --wait')

// 9) Settings sync — turn it on once, then your snippets/keybindings/profile
// follow you to any machine you sign in on.

Why it matters

Bind Alt+Z to "View: Toggle Word Wrap" and stop hunting for it in the View menu. Most editor productivity gains are about turning the things you do 10 times a day into a single key — settings sync makes those bindings portable across machines.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// Speed-run: open Palette, pin Prettier, format on save, learn 5 shortcuts a week.
Try it Yourself »

Discussion

Loading…