These are some of my favorite Visual Studio Code settings to help improve productivity. The keyboard shortcuts are Mac specific, but can be replaced.

1. Add a keyboard shortcut for keybindings.json

VSCode lets you create custom keyboard shortcuts (good!). But there's no default keyboard shortcut to access the keybindings.json file (what?!). Let's add one.

First, and for the last time ever, press Command-Shift-P then type "keyboard shortcuts" and select the Preferences: Open Keyboard Shortcuts (JSON). They make it really hard to find this file!

Then add the following text to your keybindings.json file. I use command-k command-k for this shortcut (overwrite as you plesae):

  {
    "key": "cmd+k cmd+k",
    "command": "workbench.action.openGlobalKeybindingsFile"
  },

Now you can open keybindings.json with a shortcut, instead of manually typing out a full command like a troglodyte.

2. Always open settings in JSON form

VSCode is good. The UI editor for settings is really bad. You can always edit your settings as raw JSON, and you should, because the UI doesn't tell you which settings you've overwritten.

Let's do global settings as JSON first.

• Open keybindings.json, hopefully by pressing cmd+k cmd+k from the previous tip
• Overwrite the default command-comma to open global settings in JSON form by pasting in the following:

  {
    "key": "cmd-,",
    "command": "workbench.action.openSettingsJson"
  },

This is specifically openSettingsJson to open the JSON form.

Then let's do workspace settings. If you didn't know, you can set per-folder VSCode settings. They go in a .vscode/ folder in the project folder you're in.

There is no default command to open workspace settings as JSON! This is an unfortunate inconsistency between the global and workspace settings workbench commands.

• So first, install this macros extension (you want this anyway, so useful).
• Then open keybindings.json (again, hopefully with your shortcut from tip 1)
• Then add the following shortcut. I use command-k command-comma, replace with your preference:

  {
    "key": "cmd-k cmd-,",
    "command": "macros.openWorkspaceSettingsJSON"
  },

This is a macro name, which we now have to define. So open the global settings file JSON, hopefully with command-comma, and in this settings.json file, add the following:

  "macros": {
    "openWorkspaceSettingsJSON": [
      "workbench.action.openWorkspaceSettings",
      "workbench.action.openWorkspaceSettings",
      "settings.switchToJSON"
    ]
  }

The "workbench.action.openWorkspaceSettings" is needed twice because of flakey command execution. Sometimes the switchToJSON command executes before the "workspace settings" tab is selected.

The only downside of this method is it keeps the UI editor open in a tab after switching to the JSON file.

Now you can press command-comma to open global settings.json, and you can press command-k command-comma to open local settings.json!

3. Per-Project Custom Title Bars

Do you want a custom title bar color, project title text, and optional emoji, per project to make it easy at a glance to see which project you're in? Trick question, of course you do.

Open your workspace settings, hopefully with command-k command-comma you set up above, and paste in the following:

  "workbench.colorCustomizations": {
    "titleBar.activeForeground": "#ffffff",
    "titleBar.activeBackground": "#00ff00"
  },
  "window.title": "🤘 ${activeEditorShort}${separator} Your Project Title"

You can use any variables defined in the variables reference.

The emoji is optional of course. Note you can also hover over the color hex codes to get a color picker:

4. Turn off the minimap

I don't think new VSCode users know you can turn off the minimap. I find it takes up too much valuable real estate and offers no value. You can disable it in the global settings.json file, which you hopefully now open with command-comma from the above tip, and paste in:

"editor.minimap.enabled": false,

5. Version control your configs

If you write code, and it's not under version control, does it really exist? It does not. Hopefully you already have a long-running git repository named "dotfiles" or "configs" to version control all of your editor and cross-machine configurations. If you don't, go create one, right now.

Global settings in VSCode live in $HOME/Library/Application\ Support/Code/User/settings.json.

• In your git repository, copy that file (how about into a vscode directory?):

cp $HOME/Library/Application\ Support/Code/User/settings.json ./code/  

Then make a symlink from your local repository file to where VSCode expects to find it. Run this from your Git repository root, chaning vscode/settings.json to the path of your file under version control:

ln -sf "$(pwd)/vscode/settings.json" "$HOME/Library/Application\ Support/Code/User/"  

Now if you list in long format, you should see the symlink:

ls -al $HOME/Library/Application\ Support/Code/User/

...
settings.json -> /Users/youruser/dotfiles/vscode/settings.json  

Then do the same for keybindings.json, which lives in the same folder. If you're feeling feisty, you can also do it for your snippets files, which live in $HOME/Library/Application\ Support/Code/User/snippets.

I don't think it's possible to version control which plugins you have enabled. You'll have to install those manually per machine.

It's a shame VSCode doesn't have a way to set these folders by default!

6. Other?

There's no point in using VSCode if you aren't proficient with multiple cursors. If you're not proficient, press Command-Shift-P and type "Interactive Playground" and learn about multiple cursors!

That's It!

My version controlled settings are in my configs git repo for more inspiration.

If this helped you level up your VSCode setup, consider following me on Twitter.