I spent my first year coding like a caveman. Then I found these extensions. My editor has never been the same.
It took me embarrassingly long to realize that VS Code isn't just a text editor — it's a platform. And the right extensions can turn it from "fine" into "how did I ever live without this?"
Here are the 10 that genuinely changed how I code, ranked loosely by how hard I kicked myself for not finding them sooner.
1. 🐛 Error Lens — See errors inline, instantly
Install: usernamehw.errorlens
Before Error Lens, I'd write code, run it, then scroll to the Problems tab to find what broke. Painful.
Error Lens puts the error message right next to the broken line in red. No more hunting. You see the issue the second you type it.
const x = "hello"
~~~~~~~ Type 'string' is not assignable to type 'number'
It sounds small. It is not small. This one alone will save you hours every week.
2. 🤖 GitHub Copilot — Your AI pair programmer
Install: GitHub.copilot
Yes, it costs money ($10/month). Yes, it's worth it.
Copilot suggests entire lines and functions as you type. You write a comment like // fetch user data and handle errors and it writes the code. It's not perfect, but it's right often enough to be genuinely useful.
💡 Free alternative: Try Codeium — same idea, completely free.
3. 🎨 Prettier — Stop arguing about formatting forever
Install: esbenp.prettier-vscode
Tabs vs spaces. Single quotes vs double quotes. Semicolons or no semicolons.
Prettier ends all of these arguments automatically. It reformats your code on save so it always looks consistent. Set it up once, forget about formatting forever.
// settings.json
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
If you're on a team and you don't have this, please install it right now. Your teammates will thank you.
4. 🔍 GitLens — Git superpowers inside your editor
Install: eamodio.gitlens
Ever looked at a line of code and wondered "who wrote this and why?" GitLens answers that without you leaving the file.
It shows you:
- Who last changed each line (inline blame)
- When it was changed
- What commit it came from
- The full commit message on hover
It also gives you a gorgeous history view, branch comparisons, and more. The free tier is incredibly generous.
5. 🌈 Indent Rainbow — Never lose track of nesting again
Install: oderwat.indent-rainbow
This one's simple and I love it for that. It colorizes your indentation levels so deeply nested code is actually readable.
Before: a wall of indented madness.
After: each level has its own color, and you can instantly see where blocks start and end.
Super helpful for HTML, Python, and any heavily nested JSON.
6. 📦 Import Cost — See the weight of what you import
Install: wix.vscode-import-cost
This extension shows the file size of every package you import, right next to the import statement.
import moment from 'moment' // 232.7kb 😬
import { format } from 'date-fns' // 3.1kb 😎
It's a game changer for frontend devs who care about bundle size. You'll immediately start questioning your dependencies.
7. 🖱️ Auto Rename Tag — Edit HTML tags in sync
Install: formulahendry.auto-rename-tag
You know the pain. You rename an opening HTML tag and then have to hunt down the closing tag to rename it too.
Auto Rename Tag syncs them. Change <div> and the </div> updates automatically. Works with JSX too.
I genuinely cannot believe this isn't built into VS Code by default.
8. 🔎 TODO Highlight — Never lose a TODO again
Install: wayou.vscode-todo-highlight
We all leave TODO comments. We all forget them for months.
This extension highlights TODO:, FIXME:, and other keywords in a bright, unmissable color so they scream at you until you deal with them.
You can even list all TODOs across your entire project. Terrifying. Useful.
9. 🌐 REST Client — Test APIs without leaving VS Code
Install: humao.rest-client
This one blew my mind. Instead of switching to Postman or Insomnia, you can make HTTP requests directly inside a .http file in VS Code.
GET https://api.github.com/users/torvalds
Accept: application/json
###
POST https://jsonplaceholder.typicode.com/posts
Content-Type: application/json
{
"title": "My Post",
"body": "Hello world"
}
Click "Send Request" and the response appears in a split pane. It's fast, it lives in your repo, and it's zero setup.
10. 🎭 Peacock — Color-code your VS Code windows
Install: johnpapa.vscode-peacock
Okay, this one's a little silly. But if you ever have multiple VS Code windows open at once (frontend, backend, docs...), Peacock lets you give each one a different accent color.
Your frontend window is blue. Your backend is green. Your config repo is orange. You'll never click into the wrong window again.
It's the kind of "tiny detail" extension that quietly saves your sanity.
Bonus: The ones almost made the list
- 🔵 Turbo Console Log — auto-generate descriptive console.log statements
- 📁 Project Manager — switch between projects instantly
- 🌙 One Dark Pro — the theme that lives rent-free in my editor
-
🧩 Bracket Pair Colorizer (now built-in!) — enable it in settings with
editor.bracketPairColorization.enabled: true
My recommended install order
If you're starting fresh, here's the order I'd install these:
- Prettier first — immediately improves every file you touch
- Error Lens — starts saving you time from day one
- GitLens — essential once you're working with Git
- Auto Rename Tag — if you write any HTML/JSX
- REST Client — if you work with APIs at all
- Everything else as needed!
One last thing
The best extension is the one that solves your specific frustration. If something is annoying you in VS Code, search for it — there's a 90% chance someone already built a fix for it.
What extensions are YOU running that deserve more love? Drop them in the comments — I'm always looking to upgrade my setup. 👇
If this was useful, drop a ❤️ and follow for more beginner-friendly dev content every week!
Top comments (0)