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 pressingcmd+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 openSettings
Json
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.