12 VS Code Extensions I Install on Every New Setup (2026)
Fresh install of VS Code? These are the first things I add.
Essential (Can't Work Without)
1. Error Lens — See Errors Inline
Instead of hovering over red squigglies to see the error, Error Lens shows it right in the code:
// Before: hover to see "Type 'string' is not assignable to type 'number'"
const age: number = "twenty-five"; // ❌ ???
// After:
const age: number = "twenty-five"; // Type 'string' is not assignable to type 'number' ← visible instantly!
Saves me ~50 hovers per day.
2. GitLens — Git Supercharged
# What this extension gives you:
# - Current line blame (who wrote this, when)
# - File history at a glance
# - Compare branches visually
# - Search commits by message/content
# - See who changed a specific line
The inline blame alone is worth the install. Hover over any line → see who changed it and when.
3. Prettier — Auto-Format on Save
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
Never think about formatting again. Save → formatted.
Productivity Boosters
4. Thunder Client — API Testing in VS Code
Why open Postman when you can test APIs right here?
# Create a file like api.http
### Get all users
GET http://localhost:3000/api/users
Authorization: Bearer {{token}}
### Create user
POST http://localhost:3000/api/users
Content-Type: application/json
{
"name": "Alex",
"email": "[email protected]"
}
Click "Send Request" → see response. Variables, environments, history included.
5. Auto Rename Tag — HTML/JSX Pair Renaming
Rename an opening tag → closing tag renames too:
// Type: <Card> → rename to <Section>
<Section> // Opening tag renamed
<h2>Title</h2>
</Section> // Closing tag auto-renamed!
Small thing, huge time saver for JSX/HTML heavy projects.
6. Path Intellisense — File Path Autocomplete
import { Button } from '../../components/ui/Button'; // Autocomplete the path!
import styles from './styles.module.css'; // Knows which files exist!
No more guessing relative paths or checking if a file exists.
TypeScript & JavaScript
7. Move TS — Refactor with Confidence
Right-click on a function/class → "Move to new file" → done.
Also supports: move between files, extract to named function, convert to arrow function, toggle between named/export default.
8. JavaScript (ES6) Code Snippets
Type shortcuts → expand to full boilerplate:
| Trigger | Expands To |
|---|---|
cl→ | console.log() |
fn→ | function name() {} |
fe→ | forEach loop |
af→ | arrow function |
sto→ | setTimeout |
prom→ | new Promise() |
clg→ | console.log({}) |
imp→ | import ... from '' |
9. Test Runner UI — Run Tests Visually
# Instead of reading test output in terminal:
npm test
# PASS src/user.test.js
# ✓ should create user (2ms)
# ✓ should validate email (1ms)
# You get:
# - Green/red indicators next to each test
# - Click to run individual tests
# - See error details inline
# - Coverage visualization
Visual & UX
10. One Dark Pro — The Theme That Doesn't Hurt Your Eyes
After trying 20+ themes, I keep coming back to One Dark Pro. It's easy on the eyes, has great contrast, and looks professional in screenshots.
Alternative: GitHub Sharp if you prefer light mode.
11. Material Icon Theme — Files Have Faces Now
Before: 📄 index.ts 📄 server.js 📄 package.json
After: 🔷 index.ts 🟨 server.js 📦 package.json
📁 src/ 📁 components/ ⚙️ .env
Instantly recognize file types by icon. Small joy, big difference when navigating large projects.
12. Peacock — Color-Code Your Workspaces
Working on multiple projects? Give each one a different color:
// .vscode/settings.json per workspace
{
"workbench.colorCustomizations": {
"activityBar.background": "#1a73e8", // Blue for project A
"statusBar.background": "#1a73e8",
"titleBar.activeBackground": "#1a73e8"
}
}
Never accidentally edit the wrong project's code again.
My Complete settings.json
{
// Editor
"editor.fontSize": 14,
"editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
"editor.fontLigatures": true,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.rulers": [80, 120],
"editor.minimap.enabled": false,
"editor.bracketPairColorization.enabled": true,
// Formatting
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
// Explorer
"explorer.compactFolders": false,
"explorer.fileNesting.enabled": true,
"explorer.sortOrder": "type",
// Git
"git.enableSmartCommit": true,
"git.autofetch": true,
"git.confirmSync": false,
// Terminal
"terminal.integrated.defaultProfile.linux": "zsh",
"terminal.integrated.fontSize": 13,
// Search
"search.include": {
"**/*.ts": true,
"**/*.tsx": true,
"**/*.js": true,
"**/*.json": true
},
// Breadcrumbs (navigation bar at top)
"breadcrumbs.enabled": true,
// Auto-save (don't lose work!)
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000
}
Extensions I Removed (And Why)
| Extension | Why I Removed |
|---|---|
| Live Server | Dev server handles this now |
| Bracket Pair Colorizer | Built into VS Code now |
| Open in Browser | Ctrl+Shift+V does preview |
| npm Intellisense | Already built-in |
| CSS Peek | Less needed with modern frameworks |
| TODO Highlighter | Too much noise |
The Setup Ritual
Every new machine, same process:
# 1. Install VS Code
# 2. Sync settings (Settings Sync is built-in now!)
# Ctrl+Shift+P → "Sync: Turn on Settings Sync"
# 3. Install extensions from sync OR:
code --install-extension usernamehw.linter
code --install-extension aaron-bond.better-comments
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension usernamehl.errorlens
code --install-extension eamodio.gitlens
code --install-extension rangav.vscode-thunder-client
code --install-extension formulahendry.auto-rename-tag
code --install-extension christian-kohler.path-intellisense
code --install-extension steoates.auto-import
code --install-extension ms-vscode.test-adapter-converter
code --install-extension pkief.material-icon-theme
code --install-extension johnpapa.vscode-peacock
# 4. Done. Ready to code.
What's your must-have VS Code extension? Did I miss something essential?
Follow @armorbreak for more developer content.
SOCIAL SHARE CARD GENERATOR