10 VS Code Extensions That Will Transform Your Workflow
Published on: Dev.to
Tags: #vscode #productivity #extensions #tools #javascript
Reading time: 10 min
Intro: One Extension Per Problem
You're a developer. You have 50+ problems a day:
- "My code is getting too complex"
- "I always forget to handle errors"
- "Writing commit messages takes forever"
- "JSON responses are hard to parse"
- "I can't find my TODOs"
- "Table formatting is tedious"
- "Markdown export is painful"
- "I never know how many lines I've written"
- "My imports are too heavy"
- "File headers take forever"
One extension solves each problem.
Here are the 10 essential VS Code extensions that will make your life easier.
1. Code Metrics Dashboard — Understand Your Complexity
Problem: Your code is getting complex, but you don't know where.
Solution: Code Metrics Dashboard shows complexity metrics in real-time.
What it does:
- Shows cyclomatic complexity (how many paths through your code)
- Color-coded warnings: Green ✓ | Orange ⚡ | Red ⚠️
- Per-function breakdown in sidebar dashboard
- Works with 11+ languages
Use case: Before you refactor, check the metrics. If complexity > 10, that function needs splitting.
Install: Code Metrics Dashboard
2. Git Commit Message Generator — Write Conventional Commits in Seconds
Problem: Writing meaningful git messages is tedious.
Solution: Generate Conventional Commits automatically from your diffs.
What it does:
- Analyzes your staged changes
- Generates a properly formatted commit message
- Supports custom templates and scopes
- Works offline
Example:
# Before
$ git commit -m "Updated auth stuff" # Vague!
# After (with extension)
$ git commit -m "feat(auth): add JWT refresh mechanism" # Clear!
Use case: You stage changes, run the generator, and get a professional commit message in seconds.
Install: Git Commit Message Generator
3. JSON to Types — Generate TypeScript Interfaces Instantly
Problem: Converting JSON responses to TypeScript interfaces is manual and error-prone.
Solution: Paste JSON, generate types automatically.
What it does:
- Converts JSON → TypeScript interfaces
- Also outputs Python dataclasses, Go structs, Rust, Zod schemas
- Handles nested objects automatically
- Works offline
Time saved: 5-10 minutes per API integration
Example:
// Input
{"id": 123, "name": "John", "email": "john@example.com"}
// Output (instant)
interface User {
id: number;
name: string;
email: string;
}
Install: JSON to Types
4. Import Cost Lite — Know Your Bundle Size
Problem: You add packages without knowing if they're too heavy.
Solution: See bundle sizes inline as you type.
What it does:
- Displays package size next to each import
- Shows minified + gzip sizes
- Color-coded: Green (small) | Yellow (medium) | Red (large)
Example:
import moment from 'moment'; // ⚠️ 67KB (too large!)
import dayjs from 'dayjs'; // ✓ 2KB (much better!)
Use case: Before adding a library, see its size. Optimize your bundle without guessing.
Install: Import Cost Lite
5. Smart TODO Highlighter — Never Lose a Todo Again
Problem: Your TODOs, FIXMEs, and HACKs disappear into your codebase.
Solution: Highlight them and track them in a sidebar.
What it does:
- Highlights TODO, FIXME, HACK, BUG, NOTE, OPTIMIZE, REVIEW
- Shows all markers in a sidebar tree
- Status bar counter
- Jump to any marker with one click
Example:
// TODO: Add error handling ← Yellow
// FIXME: This crashes on null ← Red
// HACK: Temporary workaround ← Orange
Use case: Before deploying, check how many FIXMEs are left. If any, delay the deploy.
Install: Smart TODO Highlighter
6. Markdown Table Formatter — Format Tables in One Click
Problem: Markdown tables get messy and unaligned.
Solution: Format and align tables automatically.
What it does:
- Auto-aligns Markdown table columns
- Supports sorting by column
- Add/remove columns instantly
- One keyboard shortcut
Example:
# Before
| Name | Age | City |
|---|---|---|
| John | 30 | New York |
| Jane | 25 | Los Angeles |
# After (perfectly aligned)
| Name | Age | City |
|------|-----|--------------|
| John | 30 | New York |
| Jane | 25 | Los Angeles |
Use case: Writing README files, documentation, or data tables.
Install: Markdown Table Formatter
7. Markdown Preview Enhanced Lite — Export to HTML/PDF
Problem: Markdown preview is basic. Exporting to PDF is painful.
Solution: Preview Markdown with tables, checklists, and export to HTML/PDF.
What it does:
- Real-time Markdown preview with styling
- Tables, checklists, code highlighting
- One-click export to HTML
- PDF export support
- Custom CSS themes
Example:
# My Document
- [x] Task 1
- [ ] Task 2
| Column 1 | Column 2 |
|----------|----------|
| Cell A | Cell B |
Install: Markdown Preview Enhanced Lite
8. File Header Generator — Auto-Generate File Headers
Problem: Writing boilerplate file headers is tedious.
Solution: Generate headers automatically when you create a file.
What it does:
- Auto-insert headers: author, date, license, description
- Customizable templates
- Works with 20+ languages
- Zero configuration
Example:
/**
* utils/math.ts
* @author John Doe
* @date 2024-04-12
* @license MIT
* Utility functions for mathematical operations
*/
Use case: New developers can just create a file and headers are auto-filled.
Install: File Header Generator
9. Line Counter Dashboard — Count Your Code
Problem: You don't know how large your codebase is.
Solution: Get instant code line counts per file and per language.
What it does:
- Counts code lines, blank lines, comments
- Language-specific breakdowns
- Workspace-wide summary
- Tree view sidebar
Example:
📊 Project Statistics
├── JavaScript: 15,000 lines
├── TypeScript: 8,500 lines
├── CSS: 3,200 lines
└── Total: 26,700 lines
Use case: Understand your codebase size, plan refactoring, estimate effort.
Install: Line Counter Dashboard
10. File Size Explorer — Find Large Files
Problem: Your project has bloated assets you don't know about.
Solution: See file and directory sizes in the Explorer tree.
What it does:
- Shows file/directory sizes in Explorer
- Color-coded warnings: Green (small) | Yellow (medium) | Red (large)
- Identify optimization opportunities
Example:
explorer/
├── src/
│ ├── components/ 12.5 MB ⚠️ (too large!)
│ └── utils/ 250 KB ✓
├── assets/ 8 MB ⚠️
└── node_modules/ 250 MB ❌ (not versioned)
Use case: Find images that need compression, dependencies that are too heavy, or bloat.
Install: File Size Explorer
Comparison Table
| Extension | Primary Use | Time Saved | Key Feature |
|---|---|---|---|
| Code Metrics | Complexity analysis | 10 min/week | Color-coded warnings |
| Git Commit | Commit messages | 5 min/day | Auto-generate conventional commits |
| JSON to Types | Type generation | 10 min/integration | Instant TypeScript interfaces |
| Import Cost | Bundle optimization | 5 min/week | See sizes inline |
| TODO Highlighter | Code organization | 10 min/week | Never lose a TODO |
| Markdown Formatter | Documentation | 5 min/doc | Perfect alignment |
| Markdown Preview | Documentation | 10 min/doc | HTML/PDF export |
| File Header | Boilerplate | 2 min/file | Auto-generate headers |
| Line Counter | Codebase metrics | 5 min/sprint | Workspace statistics |
| File Size | Asset optimization | 5 min/week | Find large files |
Installation Guide (All 10 Bundles)
Option 1: Install One by One
Open VS Code Extensions (Ctrl+Shift+X), search for each name above.
Option 2: Command Line (Faster)
code --install-extension miccho27.code-metrics-dashboard
code --install-extension miccho27.m27-git-commit-message-generator
code --install-extension miccho27.m27-json-to-types
code --install-extension miccho27.import-cost-lite
code --install-extension miccho27.smart-todo-highlighter
code --install-extension miccho27.m27-markdown-table-formatter
code --install-extension miccho27.m27-markdown-preview-enhanced-lite
code --install-extension miccho27.m27-file-header-generator
code --install-extension miccho27.line-counter-dashboard
code --install-extension miccho27.m27-file-size-explorer
Option 3: Extension Pack (Fastest)
Look for M27 Developer Tools Bundle in the Marketplace. Installs all 10 with one click.
Real-World Impact
Before (Without These Extensions)
- Manual type definitions: 10 min per API endpoint
- Random commit messages: "Fixed stuff"
- TODOs scattered everywhere
- No visibility into bundle size
- Manual complexity analysis
Weekly time cost: ~5 hours
After (With These Extensions)
- Instant type generation: 1 min per API endpoint
- Professional commits: 30 seconds
- All TODOs visible in sidebar
- Bundle size warnings inline
- Automatic complexity monitoring
Weekly time cost: ~30 minutes
Savings: 4.5 hours per week = 234 hours per year
Next Steps
- Install 1-3 extensions that match your biggest pain points
- Try them for a week
- If helpful, install the rest
- Configure shortcuts to match your workflow
- Share with your team — they'll want these too
Bonus: Tips for Maximum Productivity
- Bind keyboard shortcuts to your most-used commands
- Configure color themes to match your team's standards
-
Exclude patterns like
node_modules/anddist/from scans - Share configurations with your team via workspace settings
- Keep up to date — these extensions get new features regularly
Which extension are you most excited to try? Let me know in the comments! 👇
Keywords: vscode, productivity, extensions, tools, developer-experience, development-tools
Top comments (0)