Below are a few ways to customize Visual Studio Code.
In order to get settings.json
do cmd + shift + p
and search for settings
and select Preferences: open settings
(JSON)
.
- Disable preview
- Disable MiniMap
- Font
- Terminal
- Themes
- Active tab
- Key Bindings
- Git
- Enable Sync
- Conclusion
Disable preview
If you click on a file from file explorer or search and open a file, the file will be opened in the current window closing the previously opened file. To prevent this from happening, have below the line. Now VSCode will open new files in the next window.
"workbench.editor.enablePreview": false,
Disable MiniMap
By default, Visual studio code will show a minimap of the file on the right side. I usually use split screens, so having a minimap will occupy more screen space. So to disable it, you can add below line
"editor.minimap.enabled": false,
Font
To set fonts and size for an editor, you can use below
"editor.fontFamily": "'MesloLGSDZ Nerd Font', Menlo, Monaco, 'Courier New', monospace",
"editor.fontSize": 16,
To set fonts and size for the terminal, you can use below
"terminal.integrated.fontFamily": "MesloLGSDZ Nerd Font",
"terminal.integrated.fontSize": 16,
Terminal
Use OS default shell, by disabling vscode integrated shell.
"terminal.integrated.automationShell.osx": "",
Themes
You can find multiple themes
here.
I prefer One Dark Pro
with vscode-icons.
Once above extensions are installed, vscode automatically adds below lines in settings.json
"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "vscode-icons",
Active tab
By default, active is not highlighted, so you might find it hard to know which file you are editing when multiple files are open. You can refer to this vscode issue; due to fewer votes, this feature is not implemented. You can solve this by highlighting the active tab using the below settings.
"workbench.colorCustomizations": { // Can customize each aspect
"tab.activeBorderTop": "#07cc00",
"tab.activeBackground": "#1e5519",
"tab.activeForeground": "#f3faf2"
},
Below is how it will look like with above settings.
Key Bindings
I usually use vim bindings. Install the vscodevim plugin to enable vim bindings. If you are an emacs user, you can install Emacs Keymap. If you are spacemacs user you can install VSpaceCode
If you are using vim, you can enable copying to the system clipboard when you yank(yy
) text in the editor.
"vim.useSystemClipboard": true,
Git
Install GitLens to show inline git commits and previews like below.
Enable Sync
Enable sync like below so that settings are synced between different machines.
Conclusion
Above are a few ways to configure or customize vscode. I hope this helps. – RC
Comments