Lukas Murdock
Subscribe for updates and more.

VS Code Setup

Planted 02021-05-15

My VS Code setup.

Theme

Keybindings

  • https://dev.to/jmir17/top-20-vs-code-shortcuts-windows-edition-2jlb
  • https://www.stefanjudis.com/blog/emmet-vs-code-bindings-to-level-up-html-editing/
  • https://rachsmith.com/keyboard-shortcuts-large-file-vscode/
  • 12 minutes of VS Code keyboard shortcuts

OS Difference:

  • Mac: Command
  • Windows: Ctrl

Keybinds:

  • Toggle Sidebar Visibility: Command + B
  • Toggle Terminal: Command + backtick
  • Toggle zen mode: Command + K Z
  • Toggle bottom panel?: Command + J
  • Trigger Suggest: Control + Space
  • Collapse Folders in Explorer: Command + Shift + ↑
  • Open split editor:
  • Markdown Preview: Command + Shift + V

Selection:

  • Command Palette: Command + Shift + P
    • (The drop-down shows recently viewed files, use it to quickly switch back-and-forth)
  • Quickly navigate between recently viewed files: Control + Tab
  • Search files by name: Command + P
  • Select between quotes (custom keybindings.json): Command + quote
  • Selects everything within current tag (custom : Command + shift + Akeybindings.json)
  • Select current line: Command + L
  • Move line up: Alt + ↑
  • Move line down: Alt + ↓
  • Copy line up: Alt + shift + ↑
  • Copy line down: Alt + shift + ↓
  • Go to references: Shift + F12
  • Rename: F2
  • Emmet Wrap with abbreviation:
    • Wrap each new line: ul>li*
    • Wrap and remove list markers: ul>li*|t

Multi-select:

  • Select next occurrence: Command + D
  • Select every occurrence in file: Command + shift + L

Multi-cursor:

  • Manual selection: Alt + Click
  • Add another cursor up: Command + Alt + ↑
  • Add another cursor down: Command + Alt + ↓

Keybindings.json

// Place your key bindings in this file to override the defaults
[
    {
        "key": "shift+cmd+a",
        "command": "editor.emmet.action.balanceOut"
    },
    {
        "key": "cmd+'",
        "command": "extension.selectEitherQuote"
    },
    {
        "key": "cmd+m cmd+1",
        "command": "workbench.action.tasks.runTask",
        "args" : "Build jekyll site"
    },
    {
        "key": "cmd+m cmd+2",
        "command": "workbench.action.tasks.runTask",
        "args" : "Serve jekyll site"
    }
]

Settings.json

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.fontFamily": "Dank Mono, Menlo, Monaco, 'Courier New', monospace",
    "editor.bracketPairColorization.enabled": true,
    "prettier.requireConfig": true,
    [redacted]
    "insertDateString.format": "iso",
    "workbench.colorTheme": "Night Owl",
    "editor.fontLigatures": true,
    "editor.fontSize": 16,
    "workbench.iconTheme": "vscode-icons",
    "editor.minimap.enabled": false,
    "editor.formatOnSave": true,
    "zenMode.centerLayout": false,
    "vsicons.associations.folderDefault.root_folder": null,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}

Tasks.json

Extensions

Useful VS Code Extensions For Front-End Developers