My VSCode Setup
Tags: vscode, setup
Published: 2019-10-18 10:55:15

---
title: My VSCode Setup
published: true
description: A rundown of my visual studio code settings
tags: vscode, setup
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jzce8c7rkg30oa6d8img.png
---

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](https://gist.github.com/kensleDev/f9ccd81111529eaeb376769b46af6c3a)

If you want to give them a whirl then install [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-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](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials), [Azure Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack), [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), [AWS Toolkit](https://aws.amazon.com/visualstudiocode/)

[Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-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](https://marketplace.visualstudio.com/items?itemName=intodevelopment.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](https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme) - Day time theme

[Night Owl](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl) - Night time theme


[Macros](https://marketplace.visualstudio.com/items?itemName=geddski.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](https://gist.github.com/kensleDev/f9ccd81111529eaeb376769b46af6c3a)

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"
    ]
  },

}
```