Warning: These VS Code settings aren’t for beginners — but you’ll love these tips if you’re a senior dev.
How long is your VS Code settings.json file? Be honest.
Mine is currently 109 lines, and that got me thinking — which of these settings do I actually use?
And which settings would I recommend to other senior developers?
If you aren’t sure whether you’re ready for advanced tips, let me reassure you— being senior is just a state of mind. (Right grandpa? 👴)
1. Hide the Activity Bar via a Keyboard Shortcut
VS Code’s “Activity Bar” is the list of icons over on the left-hand side of the screen that links to the various sections of the program.
However, once you’ve been using VS Code for a while, you might want that screen real estate back. No problem, just toggle the Activity Bar.
With the Activity Bar hidden, you’ll probably find yourself using keyboard shortcuts like Ctrl+Shift+E (File Explorer), Ctrl+Shift+X (Extensions), and Ctrl+Shift+H (Search & Replace).
But how do you show the Activity Bar again once its hidden? Going back into your settings file would suck, so you can set up a custom shortcut.
Here, I’ve gone into the Keyboard Shortcuts editor to set up a custom shortcut. I was already using Ctrl+B to hide the Side Bar (the File Explorer, etc.), so I set up Ctrl+Alt+B to hide the Activity Bar.
The VS Code setting gets set automatically, so you don’t have to worry about going back into “Open Settings (JSON)” to mess with it every time.
If you prefer using the Command Palette (Ctrl+Shift+P), you could also just search “Toggle Activity Bar.” I prefer the keyboard shortcut.
2. GitHub Copilot
Opinions vary about GitHub Copilot, the new VS Code extension powered by machine learning that generates snippets as you write code.
Most people say it’s going to ruin your code by turning it into a steaming pile of crap, but I happen to like it. Sorry, haters! 😏
I wouldn’t use Copilot at work because of privacy concerns, but for personal projects I’ve found it to be fun and useful — especially for unit tests.
Of course, Copilot won’t work on all files, so you may want to configure it turn it off on certain file extensions. That’s what this setting does.
3. Zoom Setting & Font Size
There’s nothing more senior than being unable to see small text, though no one ever seems to bring it up during Zoom calls.
Have you noticed that? Someone’s taking notes or showing code that’s maybe 8 or 10 point font on their screen, and I can’t see it.
I’m not even farsighted (yet), but I prefer big DPI, large fonts, and zooming in when I’m working. Why strain my eyes if I don’t need to?
Of course, you probably aren’t going into “Open Settings (JSON)” to zoom in and out in VS Code, but you might want to edit the font size.
And, personally, I think it’s sort-of interesting that VS Code saves the zoom level in the same settings.json file as everything else.
4. Drag-and-Drop & Delete Without Confirmation
How confident are you in your programming skills? Or, better, how confident are you in VS Code’s Undo (Ctrl+Z) feature?
I found that the endless confirmations inside VS Code whenever I was using drag-and-drop or deleting a file used to break my concentration.
When you choose “Do not ask me again” for either the drag-and-drop or delete prompt, you’ll have the option saved into settings.json.
If you decide later that you miss the confirmation dialogs, you’ll be glad you know where to find these settings. 😉
5. Update Imports Automatically with Absolute Paths
One of the best features of VS Code has to be how it handles file imports — and you can make import statements even better with a few tweaks.
First, I greatly prefer absolute file paths such as @/components/Button instead of relative file paths like ../../Button.
Second, I always want my file imports updated automatically when I’m moving files around to reorganize. (Why is this even an option?)
In VS Code language, absolute imports are called “non-relative” — because that makes sense, in a weird sort of way?
Note that you’ll need to configure paths inside your .tsconfig file in order to use absolute imports. (The JavaScript equivalent is .jsconfig.)
6. Code Actions on Save
Have you ever wished VS Code could read your mind? I frequently wish that it could, and not in that creepy GitHub Copilot way, either.
That’s why I have the editor set up to do two things when I save files:
- Fix all ESLint, StyleLint, or Prettier issues.
- Add missing imports (known types not yet imported).
This is as close as you can get to programming wizardy, I think — unless you find multi-cursor tricks to be really keen.
Of course, adding missing imports doesn’t always work correctly, but when it does I’m always really impressed.
7. CSS Linting with Stylelint
You’re probably already using Stylelint, instead of the built-in CSS validation in VS Code, but if not you need to configure it in the settings.
The other setting mentioned here is editor.suggest.insertMode, which is a mouthful to write and even more so to say.
When you set that setting to “replace,” then Intellisense changes slightly — when you choose a hint and hit Tab or Enter, the hint replaces the entire text, instead of just part of it. It’s hard to describe, but pretty useful.
8. Emmet Superpowers
You may be familiar with Emmet, “the essential toolkit for [seasoned] web-developers.” If you’re not, you should go play Sourcery. I’ll wait.
While Emmet is built-in to VS Code (yay!), you have to manually configure the settings so that the Tab key triggers the autocomplete (boo!).
You may also find yourself having to teach Emmet the ways of the world — like how PostCSS is just CSS, or how you can write React in Markdown.
9. Tailwind CSS Tips and Tricks
Tailwind CSS Intellisense isn’t built-in to VS Code (yet), but it is available as a free VS Code extension.
You can make its Tailwind CSS-enhancing features even better with two additional settings.
The first one allows you to use Emmet completions with Tailwind CSS, which means h2.font-bold.text-red-500.text-2xl will work as intended.
The second setting enables the Tailwind CSS linter built-in to the Intellisense extension. With the linter enabled, you’ll get warnings and errors for unsupported use of the @apply directive, conflicting CSS properties, and my favorite — recommended variant order in JIT (Just-in-Time) mode.
Why does variant order matter so much? Well, it doesn’t really, except that VS Code will automatically sort your Tailwind classes when combined with the “fix all on save” setting I mentioned earlier.
I used to use an extension called Headwind to sort my Tailwind CSS classes, but it hasn’t been updated for JIT. I find having an automated tool that keeps my Tailwind CSS classes in order is clutch.
10. Open Files with a Single-Click
One thing that really bothers me about VS Code’s default user interface is that it takes a double-click to open a file from the File Explorer.
A single click gets you that weird “Preview” mode, where when you click on the next file the first file disappears. It’s like having only a single tab.
I’ve Googled how to fix this UX issue multiple times, because I can’t even remember that it’s called Preview mode.
Once you turn it off, a single-click will open a file in a new tab. Problem solved, and you can get back to work. Phew!
Bonus Tip—Turn on Settings Sync
Rounding out my top 10 list is an underrated VS Code feature, Settings Sync, which you actually configure from the Activity Bar.
Click on the gear at the bottom-left of the screen (the very bottom of the Activity Bar) and choose “Turn On Settings Sync…”
You can probably guess what Settings Sync does — it saves your settings.json file, along with your extensions and themes, to a GitHub Gist.
Wow! Such backup! It’ll definitely come in handy when your computer inevitably suffers the heat death of the universe. Or crashes.
I hope you enjoyed my top 10 VS Code settings for senior developers. Be sure to let me know in the responses which settings I left out.
Happy coding! 🎃
