loading...
Cover image for My VSCode Setup

My VSCode Setup

julian_e_yak_win_andi profile image Julian Iaquinandi ・4 min read

Like most of us, my setup is ever-changing, I tend to install and uninstall plugins based on the projects that I'm doing but there are staples that get used regardless and the aim of this post is to document the settings/plugins/shortcuts that I can't go without.

You can check out my full settings here: Gist

If you want to give them a whirl then install Settings Sync and use the above gists id

Keyboard Shortcuts

I "go in" when it comes to keyboard shortcuts. I enjoy remapping programs to bend them to my will but what it really does for me is allows me to get acquainted with all the features of the tool at hand. I also have an AutoHotKey script that allows me to navigate windows via the caps lock key but I will save that for another post.

After many, many iterations I've landed on the following config/system:

File Navigation - ALT

Action Shortcut
Next Tab ALT + S
Previous Tab ALT + A
Toggle Editor Pane ALT + D
Full Screen Editor Pane ALT + F
Center Editor Panes ALT + C
Focus Editor Pane ALT + Q
Expand current selection ALT + K
Shrink current selection ALT + J
Navigate Backward (cursor) ALT + L
Navigate Foward (cursor) ALT + H

Terminal / Output Navigation - ALT

Action Shortcut
Focus Terminal 1 ALT + W
Focus Terminal 2 ALT + E
Fullscreen Terminal ALT + R
Toggle Terminal Pages ALT + T
Kill Terminal ALT + 4
New Terminal ALT + 5
Focus Problems Panel ALT + 1
Focus Output Panel ALT + 2
Focus Debug Console Panel ALT + 3

Macros - ALT + M

Action Shortcut
Comment Down ALT + M, ALT + C
Delete Current Line ALT + M, ALT + D
Go to next Error w/ suggestion ALT + M, ALT + E

Misc

Action Shortcut
Copy File Path CTRL + SHIFT + C, C
Copy Relative File Path CTRL + SHIFT + C, V
Toggle Sidebar CTRL + B
Toggle Activity Bar CTRL + ALT + B

Extensions

I love the plugin architecture that VSCode has adapted and now you can install most plugins without a reload 😍

When writing this up, in fact, every time I check my plugins I uninstall a handful and come to the realisation I don't need 90% of what I've installed. So after my cleanup, there's not that much to shout about which isn't necessarily a bad thing as I'm always trying to cut down my dependencies but here are the few that I actually use daily.

Framework specific tools - Dependant on the stack I'm using: Angular Essentials, Azure Tools, Vetur, AWS Toolkit

Settings Sync - Keeps my config consistent across multiple machines with ease and syncs via a Github gist. I code across 3 machines and previous to finding this plugin did it manually

Nightlight - This is a new addition as I found myself constantly switching themes this plugin will automatically switch themes either at a set time or when it's getting dark.

Palenight Theme - Day time theme

Night Owl - Night time theme

Macros - Allows you to create custom macros - Lots of potential here. Check out "Go to next Error w/ suggestion" in keyboard shortcuts

Settings

I've not included all of my settings file but I have included what I think you may be interested in, The full file can be found here: Gist

There's nothing too special here but:

  • Prefer setting the sidebars to the right, that way when toggling the sidebars the leftmost editor stays in the same place.

  • The title bar shows the file path as described here: https://bit.ly/2MSb94n

  • Like using Fira Code for font ligatures

  • Minimap disabled by default and doesn't render characters when open

{
  terminal.integrated.fontSize": 12,
  "terminal.integrated.fontSize": 12,
  "editor.fontFamily": "Fira Code, Hasklig Light, Hack, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.fontSize": 12,
  "editor.lineHeight": 22,
  "editor.letterSpacing": 0.5,
  "editor.formatOnPaste": true,
  "editor.formatOnType": false,
  "files.trimTrailingWhitespace": true,
  "editor.cursorBlinking": "phase",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.renderWhitespace": "all",
  "editor.insertSpaces": true,
  "editor.smoothScrolling": true,
  "window.zoomLevel": 0,
  "files.insertFinalNewline": true,

  "workbench.editor.enablePreviewFromQuickOpen": false,
  "explorer.openEditors.visible": 0,
  "window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}",

  "editor.minimap.enabled": false,
  "editor.minimap.renderCharacters": false,
  "editor.minimap.maxColumn": 200,
  "editor.minimap.showSlider": "mouseover",

  "telemetry.enableCrashReporter": false,
  "telemetry.enableTelemetry": false,

  "workbench.settings.enableNaturalLanguageSearch": false,
  "workbench.sideBar.location": "right",

  "macros": {
    "commentDown": [
      "editor.action.copyLinesDownAction",
      "cursorUp",
      "editor.action.addCommentLine",
      "cursorDown"
    ],
    "nextErr": [
      "editor.action.marker.nextInFiles",
      "editor.action.addSelectionToNextFindMatch",
      "editor.action.triggerSuggest"
    ]
  },

}

Posted on by:

julian_e_yak_win_andi profile

Julian Iaquinandi

@julian_e_yak_win_andi

Front end web dev that feels full stack ☁⚡

Discussion

markdown guide