In this tutorial, I will walk you through my full VS Code setup.
Over time, many of you have asked what theme I’m using and wanted to see my entire settings.json file. So, I’m doing a full deep dive.
I will show you everything step-by-step:
- How to set up the theme
- Which settings and extensions I use and why I use them
- And other tips & tricks along the way
👉 Click here to go directly to the settings.json file containing all the settings presented in this tutorial.
▶️ If you want a complete showcase of this tutorial, I invite you to check out this video as well:
How to Set Up the Theme
Since most of you asked about the theme I’m using or wanted to know how I set it up, I will start with that.
In the last two years, I think I changed my theme only once. In my older videos, I used a theme called Material Theme, and I used it exactly as it came, without any tweaks.
But one day, I woke up to find it removed from the marketplace. Turns out Microsoft found some suspicious code in it, which is pretty concerning. I hope the theme’s author never managed to exfiltrate our data or do anything shady.
This was nine months ago, and since then, I’ve been using another theme that I tweaked a bit to make it look somewhat similar to the old one.
Press CTRL + SHIFT + X or (CMD + SHIFT + X on Mac) to open the Marketplace and then install the Better Material Theme Darker High Contrast extension by CrazyFluff.
I checked the theme’s repository to make sure my data isn’t going to North Korea, and luckily, everything looked clean.
Since it feels messy to go through each setting one by one in the article, I prefer to list them all in bulk and then comment on each one. If you want to see the impact of each setting, I recommend checking out the video.
// Theme
"workbench.colorTheme": "Better Material Theme Darker High Contrast",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
"statusBar.foreground": "#FFFFFF",
"editorCursor.foreground": "default",
"editorLineNumber.activeForeground": "#ffffff",
"tab.activeBorder": "#84FFFF",
"tab.hoverBackground": "#444444",
"tab.hoverForeground": "#FFFFFF",
"list.activeSelectionForeground": "#84FFFF",
"list.inactiveSelectionForeground": "#84FFFF",
"list.highlightForeground": "#84FFFF",
"editorSuggestWidget.highlightForeground": "#84FFFF",
"activityBarBadge.background": "#84FFFF",
"panelTitle.activeBorder": "#84FFFF",
"scrollbarSlider.activeBackground": "#84FFFF50",
"editorWidget.resizeBorder": "#84FFFF",
"textLink.foreground": "#84FFFF",
"editor.lineHighlightBackground": "#2a2a2a",
"menubar.selectionForeground": "#84FFFF",
"pickerGroup.foreground": "#84FFFF",
"menu.selectionForeground": "#84FFFF",
"settings.headerForeground": "#84FFFF",
"settings.modifiedItemIndicator": "#84FFFF",
},The colors are based on Material Theme, but I’m not a fan of the high-contrast part because it kind of burns my eyes.
I like to keep the settings grouped by category, so that’s why I added a comment called Theme under which I placed all theme-related settings.
Most of the settings use the same color (#84FFF) because I wanted to replace the loud, punchy green with something more neutral.
Let’s start with the first setting.
statusBar.foreground
This setting changes the color of the status bar.
editorCursor.foreground
This setting changes the color of the cursor.
editorLineNumber.activeForeground
This setting changes the color of the editor line in the gutter.
tab.activeBorder
This setting changes the color of the border of the active tab.
tab.hoverBackground, tab.hoverForeground
I use these two settings to have a visual response when I hover over a tab.
list.*, editorSuggestWidget.highlightForeground
I use the list.activeSelectionForeground setting in conjunction with list.inactiveSelectionForeground, list.highlightForeground and editorSuggestWidget.highlightForeground to change the colors within the inline suggestion widget.
list.activeSelectionForeground changes the color of the first suggestion from the list of suggestions.
list.inactiveSelectionForeground changes the colors of the active file and the name of the active terminal.
list.highlightForeground changes the color of the matching characters within the first inline suggestion.
editorSuggestWidget.highlightForeground changes the color of the remaining matching characters in the inline suggestion widget.
activityBarBadge.background
This setting changes the color of the activity badge.
panelTitle.activeBorder
This setting changes the color of the active terminal border.
scrollbarSlider.activeBackground
This setting changes the color of the scrollbars.
editorWidget.resizeBorder
This setting changes the color of the search bar.
textLink.foreground
This setting changes the color of the links.
editor.lineHighlightBackground
I use this setting to tweak the background color of the current code selection line.
I use this setting to replace the green color of the text that shows when you hover over the Command Palette.
pickerGroup.foreground
I use this setting to update the color of the links inside the Command Palette.
I use this setting to change the header colors in the Settings menu.
settings.headerForeground
I use this setting to change the color of the line that indicates when a setting was modified.
settings.modifiedItemIndicator
I use this setting to change the colors of the items from the context menu you get on right-click.
This wraps up the color adjustments. 🎉
Editor
// Editor
"editor.mouseWheelZoom": true,
"editor.lineHeight": 1.7,
"editor.fontSize": 20,
"editor.fontFamily": "JetBrains Mono",
"editor.fontLigatures": true,
"editor.wordSeparators": "`~!@#$%^&*()-_=+[{]}\\\\|;:'\\\",.<>/?",
"editor.scrollOnMiddleClick": true,
"editor.formatOnPaste": true,
"editor.find.addExtraSpaceOnTop": false,
"workbench.editor.wrapTabs": true,
"workbench.editor.pinnedTabsOnSeparateRow": true,
"workbench.editor.enablePreview": false,
"workbench.editor.empty.hint": "hidden",
"workbench.editor.closeOnFileDelete": true,editor.mouseWheelZoom
This setting allows me to zoom by holding CTRL (or CMD on Mac) and scrolling the mouse wheel.
editor.lineHeight
I like the code to feel roomy. It makes it much easier to read and cuts down the effort. I use this setting to increase the space between code lines a bit.
The 1.7 value works as a multiplier. In other words, it tells the editor to take the default line height and multiply it by 1.7.
editor.fontSize
If you zoom with the mouse wheel, you don’t technically need to set a font size. But it’s good to set a default font size so you don’t have to zoom in every time you open a new editor.
editor.fontFamily
An important aspect for readability is the font. I’ve been using JetBrains Mono for a few months now, and it works really well for me. For a more detailed walkthrough on how to install JetBrains Mono, I recommend checking out this tutorial.
editor.fontLigatures
The JetBrains Mono font also supports ligatures. There are symbols that combine two or more characters into a single form to fix spacing issues or improve the overall aesthetics.
editor.wordSeparators
I use this setting to set up a list of characters that act as word separators.
I think word separators help when navigating code, especially with keybinds like CTRL + -> or <-, or when you try to select text with a double-click.
Let’s take my_word as an example. If you use CTRL + -> / <-, VS Code doesn’t treat the underscore (_) as a separator. If you replace the underscore with a dash (-) or a dot (.), then VS Code will treat them as separators.
However, in my case, since I sometimes use an underscore to name variables, especially in Rust, I want the underscore to be treated as a word separator.
This long string of characters ~!@#$%^&*()-_=+[{]}\\|;:'\\",.<>/? will be treated as a word separator.
editor.scrollOnMiddleClick
When you’re working with pretty big files, it would help if you could scroll faster using the mouse’s middle-click. That’s exactly why I use this setting.
editor.formatOnPaste
This setting tells VS Code to format your code upon pasting.
editor.find.addExtraSpaceOnTop
When you open the search widget with CTRL + F (or CMD + F on Mac), the editor shifts down a bit, as if the search widget is pushing it down. This setting fixes that.
workbench.editor.wrapTabs
When you open a lot of tabs, VS Code keeps them all on one row and lets you scroll through them with a horizontal scrollbar.
I’m not particularly fond of that. I prefer to see all the open tabs without having to scroll. This way, I only keep the tabs I actually use, and they’re easier to access.
workbench.editor.pinnedTabsOnSeparateRow
Sometimes I pin the tabs I don’t want to lose or the ones I access more often when I’m working on a task that forces me to open a ton of files.
By default, VS Code places pinned tabs at the start of the tab list. But over time, I’ve noticed that it’s actually more helpful for me if pinned tabs sit on a separate row instead of being mixed with the unpinned ones.
workbench.editor.enablePreview
This is one of the settings that I think should be enabled by default.
When you open a file, you will notice its title is italic. If you switch to another file, VS Code opens it in the same tab.
I don’t like that. When I click a file, I want it to open in its own tab, not replace the existing one. To me, this feels wrong.
There is a way to tell VS Code to keep the current tab and open the next file in a new tab. If you want to avoid replacing the existing file, instead of single-clicking it, you double-click it or click its name in the tab bar.
If the title is no longer italic, that means the next file will open in a separate tab. But all this extra clicking is just unnecessary friction, so this setting basically fixes the issue.
When you click a file, it is always opened in a new tab. Simple as that!
workbench.editor.empty.hint
I use this setting to hide the hint that shows up when a new or empty tab is opened.
workbench.editor.closeOnFileDelete
I am using this setting to automatically close any file if it is deleted by any other process outside VS Code.
Terminal
// Terminal
"terminal.integrated.defaultProfile.windows": "Git Bash",
"terminal.integrated.enablePersistentSessions": false,By default, PowerShell is the default VS Code terminal.
I prefer Git Bash instead.
If you want a full walkthrough on how to set up your terminal, I already have a tutorial where I go into all the details.
terminal.integrated.defaultProfile.windows sets the default terminal to Git bash and terminal.integrated.enablePersistentSessions doesn’t restore the previous session or its history when you reopen the terminal.
Workbench
// Workbench
"workbench.navigationControl.enabled": false,
"chat.commandCenter.enabled": false,
"workbench.statusBar.visible": false,
"workbench.activityBar.location": "hidden",
"workbench.externalBrowser": "brave",
"workbench.tree.enableStickyScroll": false,I know this might look a bit confusing based on how I organized the settings so far, but I prefer grouping them in a way that makes sense to me, not strictly by how VS Code categorizes them internally.
You could say that the theme-related settings also belong under Workbench, and you would be absolutely right.
Technically, they do. That’s why they are part of the workbench namespace.
But for me, it’s more helpful to keep theme-specific settings in their own category, because the Workbench namespace contains a lot of other settings that are not theme-related.
I use this setting to get rid of the two arrows to the left of the Command Palette area. I never use them, and I prefer keeping that area clean.
chat.commandCenter.enabled
On the right side of the Command Palette, there is the Copilot bubble chat that I hide with this setting. I don’t usually use Copilot that often, so for me it makes sense to hide it. If you do use Copilot daily, maybe you would benefit from keeping it.
workbench.statusBar.visible
I use this setting to hide the status bar. I usually don’t use it and prefer to keep it out of sight. When I do need it, I just enable it temporarily and hide it again afterwards.
workbench.activityBar.location
Another area I rarely use is the activity bar. I use this setting to hide it.
workbench.externalBrowser
This is another setting that I find to be important because it controls which browser opens when you click links within VS Code, such as those found in a README file.
For more details on this, head over to this tutorial where I cover it in depth.
workbench.tree.enableStickyScroll
I’m not very fond of the sticky scroll within the Explorer, and I use this setting to disable it.
This wraps up the section where I went over setting up the theme, editor, terminal, and a few tweaks to give you more screen space and easier navigation.
Now, let’s move on to extensions.
Extensions
My philosophy on extensions is quite simple: the fewer, the better. I try to use as few extensions as possible for a couple of reasons.
VS Code is an extremely popular editor, which naturally attracts predators.
There are plenty of cases where malicious actors create extensions that look shiny and useful at first glance, but actually contain a backdoor or steal personal data. Just like I mentioned at the start of the video about the theme I used before. There are also cases where even popular extensions have been hijacked because the author got hacked in one way or another.
So, from a security standpoint, the fewer extensions you have, the safer you are.
Another reason I prefer minimal extensions is that they bloat your editor. Every extension you install adds overhead and can slow VS Code down.
Some extensions also overlap in functionality, so you have to be careful not to end up with the same feature implemented multiple times.
These are two main reasons I like to keep my extension to a minimum.
Regarding security, Microsoft is constantly fighting off malicious actors, and I think they do a pretty good job protecting the Marketplace. But as developers, we also need to stay cautious and not leave any doors open.
With that said, let me show you which extensions I actually use.
Better Material Theme Darker Higher Contrast
This is the extension that installs the Material theme.
Material Icon Theme
There could be no Material Theme without the iconic files and folders icons.
GitLens — Git supercharged
A useful extension for everyone, no matter what language or tech stack you are using, assuming you are using Git, though.
The Community edition gives you pretty much everything you need for the day-to-day Git work.
You can run git blame directly in the editor, squash commits, create branches, open pull requests, and much more.
For advanced stuff, like AI-powered features, you can try the paid version. This is not a sponsorship; GitKraken didn’t pay me to write this. But hey, I’m open to a collaboration if someone from GitKraken happens to read this. 🐙
WSL
If you are on Windows and want to run a Linux environment, you need WSL (Windows Subsystem for Linux). This extension makes working with WSL a whole lot easier.
Sublime Text Keymap and Settings Importer
Before using VS Code, I used Atom (🪦), and before that, I used Sublime Text.
Sublime Text is an amazing editor, and I still use it alongside VS Code. I got so used to Sublime Text’s keybindings that I really wanted to have them in VS Code as well, and that’s exactly why I am using this extension.
Prettify JSON
I work with JSON files a lot, and this extension does exactly what it should: it formats your JSON.
To use it just press CTRL + SHIFT + P (or CMD + SHIFT + P on Mac), and then run Prettify JSON.
The downside of this extension is that it was last updated about nine years ago, so there’s a good chance you might run into bugs, but so far, I haven’t had any issues with it.
Moreover, since the extension’s repository isn’t public and it hasn’t been updated in nine years, I prefer to disable Auto Update for it. If you have a recommendation for a similar extension, let me know.
Rainbow CSV
I find this extension useful because it makes CSV files much easier to read in VS Code. It has other features too, but that’s mainly what I use it for.
For more details, I also made a dedicated tutorial about it.
DotEnv
This extension adds syntax highlighting for .env files.
Simple but exactly what you ned.
EditorConfig for VS Code
This is another extension I use in most of my projects.
The .editorconfig file is meant to enforce consistent formatting rules across different editors and IDEs in a project.
If you’re interested in finding more about EditorConfig, I recommend checking out the official website, or let me know in the comments section if you would like me to make a video about it.
Even Better TOML
Since I also work in Rust, I need syntax highlighting for .toml files, along with validation, folding, and formatting.
Even Better TOML takes care of all of that exactly as it should.
rust-analyzer
Since I mentioned Rust, a must-have extension is rust-analyzer.
It provides code completion, the ability to go to definitions, find all references, syntax highlighting, and much more. If you are not using this extension, you are really doing yourself a disservice.
PHP Namespace Resolver
Besides Rust, I also work with PHP, and unfortunately, the old elephant doesn’t get enough attention, and VS Code doesn’t include basic features like namespaces resolving out of the box.
To fill that gap, I use PHP Namespace Resolver, which helps me import classes and even sort them by size and alphabetically.
For more details about this extension, I made a dedicated video about it.
PHP Intelephense
This extension provides a plethora of features that will make your life easier.
Every PHP developer should have this extension installed.
Laravel
In the past few years, I’ve mostly worked with Laravel, and until recently, there wasn’t an official extension for it.
Fortunately, this year, Laravel released the official Laravel VS Code extension. It comes packed with features that any Laravel developer will enjoy.
Sometimes it can be a bit buggy, but the Laravel team is actively improving it, and I’m confident it will become the go-to extension for every Laravel developer.
Vitest
I work with Vitetest in both Laravel and non-Laravel projects, and it works beautifully.
With the Vitest extension, you can run, debug, or watch tests directly in VS Code, get coverage support, and many other useful features.
Complete settings.json file
{
// Theme
"workbench.colorTheme": "Better Material Theme Darker High Contrast",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
"statusBar.foreground": "#FFFFFF",
"editorCursor.foreground": "default",
"editorLineNumber.activeForeground": "#ffffff",
"tab.activeBorder": "#84FFFF",
"tab.hoverBackground": "#444444",
"tab.hoverForeground": "#FFFFFF",
"list.activeSelectionForeground": "#84FFFF",
"list.inactiveSelectionForeground": "#84FFFF",
"list.highlightForeground": "#84FFFF",
"editorSuggestWidget.highlightForeground": "#84FFFF",
"activityBarBadge.background": "#84FFFF",
"panelTitle.activeBorder": "#84FFFF",
"scrollbarSlider.activeBackground": "#84FFFF50",
"editorWidget.resizeBorder": "#84FFFF",
"textLink.foreground": "#84FFFF",
"editor.lineHighlightBackground": "#2a2a2a",
"menubar.selectionForeground": "#84FFFF",
"pickerGroup.foreground": "#84FFFF",
"menu.selectionForeground": "#84FFFF",
"settings.headerForeground": "#84FFFF",
"settings.modifiedItemIndicator": "#84FFFF",
},
// Editor
"editor.mouseWheelZoom": true,
"editor.lineHeight": 1.7,
"editor.fontSize": 20,
"editor.fontFamily": "JetBrains Mono",
"editor.fontLigatures": true,
"editor.wordSeparators": "`~!@#$%^&*()-_=+[{]}\\\\|;:'\\\",.<>/?",
"editor.scrollOnMiddleClick": true,
"editor.formatOnPaste": true,
"editor.find.addExtraSpaceOnTop": false,
"workbench.editor.wrapTabs": true,
"workbench.editor.pinnedTabsOnSeparateRow": true,
"workbench.editor.enablePreview": false,
"workbench.editor.empty.hint": "hidden",
"workbench.editor.closeOnFileDelete": true,
// Terminal
"terminal.integrated.defaultProfile.windows": "Git Bash",
"terminal.integrated.enablePersistentSessions": false,
// Workbench
"workbench.navigationControl.enabled": false,
"chat.commandCenter.enabled": false,
"workbench.statusBar.visible": false,
"workbench.activityBar.location": "hidden",
"workbench.externalBrowser": "brave",
"workbench.tree.enableStickyScroll": false,
}Recap
This wraps up this tutorial 🥳
We went through the theme’s config, set up the editor to use space efficiently, and I showed the extensions I use.
I also explained what each setting does and why I use it.
If you have any questions or ideas for other tutorials, feel free to leave a comment. I do read them all.
I hope this tutorial was helpful and that you picked up at least one useful tip.
Happy building 💜
Let me know what you think about this article in the comments section below.
If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.