Most "VS Code tips" articles are really extension lists. This one isn't.
Extensions are great, but the built-in settings in VS Code are where most of the real productivity wins live — and most developers never touch them. They install VS Code, maybe change the theme, and use the defaults forever.
Here are seven settings that I turn on in every fresh VS Code install. Each one takes about 10 seconds to enable, and together they've saved me more time than any extension I've ever installed.
Where to find these: open Settings with Cmd + , (Mac) or Ctrl + , (Windows/Linux). You can either use the UI search bar at the top, or click the little {} icon in the top-right to edit settings.json directly. I'll give you the JSON version for each one because it's faster to copy.
1. Format on Save
"editor.formatOnSave": true
What it does: Every time you save a file, VS Code automatically formats it using your configured formatter (Prettier, Black, gofmt, whatever).
Why it's a big deal: You stop thinking about formatting entirely. No more half-indented blocks, no more inconsistent quotes, no more "oh I forgot a semicolon." Save the file and it's clean.
If you're working on a team, this also kills the most common source of noisy git diffs — formatting drift between contributors.
2. Auto Save
"files.autoSave": "onFocusChange"
What it does: Automatically saves your file when you click away from it (to the terminal, another file, your browser, anywhere).
Why it's a big deal: The tab-switch-to-browser-refresh-see-no-changes-go-back-and-save dance is one of those small frustrations you only notice once it's gone. With this on, you flip to your browser and the changes are already there.
I prefer onFocusChange over afterDelay because saves happen at predictable moments instead of randomly while you're mid-thought.
3. Bracket Pair Colorization
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active"
What it does: Matches brackets by color, so nested {}, [], and () stand out visually. The second setting adds a subtle vertical guide connecting each bracket pair.
Why it's a big deal: Reading deeply nested JavaScript or JSON becomes dramatically easier. You can tell at a glance whether you're inside the right block. This used to require an extension (Bracket Pair Colorizer), but VS Code now ships it natively.
4. Sticky Scroll
"editor.stickyScroll.enabled": true
What it does: Pins the current scope (function name, class, if block) to the top of the editor as you scroll.
Why it's a big deal: Ever scrolled 80 lines into a long function and forgotten which function you're in? This fixes that completely. The containing function name stays visible at the top of your editor, so context is always one glance away.
This is one of those settings you'll wonder how you lived without.
5. Word Wrap
"editor.wordWrap": "on"
What it does: Long lines wrap to the next visible line instead of scrolling horizontally.
Why it's a big deal: Horizontal scrolling is one of the worst inventions in software. With word wrap on, you can see all your code without reaching for your mouse. Some developers hate this on aesthetic grounds — try it for a week before deciding.
If you prefer wrapping only very long lines, use "editor.wordWrap": "bounded" with "editor.wordWrapColumn": 120.
6. Smart Renaming Across Files
"editor.linkedEditing": true
What it does: When you rename an opening HTML/JSX tag, the closing tag updates automatically in real time.
Why it's a big deal: Tiny, but you'll notice it constantly if you write React or HTML. Rename <div> to <section> and the closing tag changes as you type. No more forgotten mismatched tags.
Bonus: For actual symbol renaming across files (like renaming a function that's imported in 12 places), press F2 on the symbol. VS Code will rename every reference across your entire project. This has been in VS Code forever, and I meet senior developers who don't know about it.
7. Files You Actually Care About
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/node_modules": true,
"**/dist": true,
"**/.next": true,
"**/coverage": true
}
What it does: Hides these folders from the file explorer sidebar.
Why it's a big deal: Your file tree stops being 80% build artifacts and 20% your actual code. node_modules especially — if you've ever accidentally expanded it in the sidebar and watched VS Code freeze, you know why this matters.
Files are still there on disk. They just don't clutter your view.
Bonus: Two More Worth Knowing
These didn't make the top seven because they're more opinionated, but they're worth trying:
Render whitespace characters (helpful when debugging weird indentation issues):
"editor.renderWhitespace": "boundary"
Minimap off (more code, less distraction):
"editor.minimap.enabled": false
How to Apply All of These at Once
Open your settings.json (Cmd + Shift + P → "Preferences: Open User Settings (JSON)") and paste:
{
"editor.formatOnSave": true,
"files.autoSave": "onFocusChange",
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
"editor.stickyScroll.enabled": true,
"editor.wordWrap": "on",
"editor.linkedEditing": true,
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/node_modules": true,
"**/dist": true,
"**/.next": true,
"**/coverage": true
}
}
Save the file. Done. Your VS Code is now measurably more pleasant to use.
The Takeaway
Productivity gains from tools are usually overstated — no editor setting will turn you into a 10x developer. But these aren't about being 10x faster. They're about removing the small, constant friction that adds up over a workday: forgotten saves, mismatched tags, scrolling to figure out what function you're in, staring at node_modules.
Remove enough small friction and you end the day with more energy for the actual hard problems.
Try these for a week. If any of them don't click for you, turn them off — no loyalty required. But I'd bet most of them end up permanent.
What's your go-to VS Code setting that didn't make my list? I'm always looking for new ones — drop yours in the comments.
