DEV Community

miccho27
miccho27

Posted on

Smart TODO Highlighter: Never Miss a Code Marker Again

#vscode #productivity #tools

Smart TODO Highlighter: Never Miss a Code Marker Again

Published on: Dev.to
Tags: #vscode #productivity #code-organization #extension #beginners
Reading time: 4 min

The Problem: Lost TODOs in Your Codebase

You're coding and realize: "I need to handle this later."

So you write:

// TODO: Add error handling for this endpoint
Enter fullscreen mode Exit fullscreen mode

Fast forward 3 weeks.

You've forgotten about it. Your code review misses it. It ships to production.

A user encounters the bug. The issue is marked as TODO: handle error case.

Now you have a critical issue instead of a 5-minute fix.

Why Comments Get Lost

  1. No visual distinction — TODOs blend with regular comments
  2. No search — You have to remember they exist
  3. No summary — You don't know how many TODOs are in your project
  4. No tracking — Completed TODOs aren't removed

The Solution: Smart TODO Highlighter

Smart TODO Highlighter finds all code markers (TODO, FIXME, HACK, BUG, NOTE, OPTIMIZE, REVIEW) and highlights them with color coding.

How It Works

Your code:

// TODO: Add error handling
// FIXME: This crashes on null input
// HACK: Temporary workaround for database issue
// BUG: Memory leak in event listener
Enter fullscreen mode Exit fullscreen mode

Instantly becomes:

// TODO: Add error handling              ← Yellow highlight
// FIXME: This crashes on null input     ← Red highlight
// HACK: Temporary workaround            ← Orange highlight
// BUG: Memory leak in event listener    ← Red highlight
Enter fullscreen mode Exit fullscreen mode

Plus: A tree view in the sidebar showing all markers:

📝 Code Markers (12)
├── TODO (5)
│   ├── Add error handling (line 45)
│   ├── Refactor authentication (line 120)
│   ├── Add unit tests (line 200)
│   └── ...
├── FIXME (3)
├── HACK (2)
└── BUG (2)
Enter fullscreen mode Exit fullscreen mode

And a status bar counter:

👁️ TODO: 12 | ⚠️ BUGS: 2 | 🔨 FIXES: 3
Enter fullscreen mode Exit fullscreen mode

Supported Markers

Marker Color Use Case
TODO Yellow Feature to implement later
FIXME Red Bug that needs fixing
HACK Orange Temporary workaround
BUG Red Known bug
NOTE Blue Important information
OPTIMIZE Purple Performance improvement
REVIEW Cyan Code to review

Features

1. Sidebar Tree View

Organized list of all markers in your project:

Smart TODO Highlighter
├── Current File (5)
│   ├── TODO: Handle errors (45)
│   └── FIXME: Null check (120)
├── Entire Project (47)
│   ├── TODO (20)
│   ├── FIXME (15)
│   ├── HACK (8)
│   └── BUG (4)
Enter fullscreen mode Exit fullscreen mode

Click a marker → jumps to that line.

2. Status Bar Counter

Shows at bottom-right of screen:

TODO: 20 | FIXME: 15 | HACK: 8 | BUG: 4
Enter fullscreen mode Exit fullscreen mode

Warns you if bugs are high.

3. Overview Ruler

Markers appear in right edge of editor:

[====================]
[====●========]  ← FIXME at line 120
[=====●=======]  ← TODO at line 145
Enter fullscreen mode Exit fullscreen mode

Visual guide to marker locations.

4. Customizable Colors 

{
  "smart-todo.colors": {
    "TODO": "#FFD700",      // Yellow
    "FIXME": "#FF4444",     // Red
    "HACK": "#FF9500",      // Orange
    "BUG": "#FF0000",       // Dark red
    "NOTE": "#6A9FB5",      // Blue
    "OPTIMIZE": "#AA00FF",  // Purple
    "REVIEW": "#00FFFF"     // Cyan
  }
}
Enter fullscreen mode Exit fullscreen mode

Installation (3 Steps)

  1. Open VS Code Extensions: Ctrl+Shift+X
  2. Search: "Smart TODO Highlighter"
  3. Click Install

Usage Guide

Basic Usage

After install, just write comments:

// TODO: Add input validation
// FIXME: This crashes when user clicks twice
Enter fullscreen mode Exit fullscreen mode

They're automatically highlighted.

View All Markers

Open the Smart TODO Highlighter sidebar:

  1. Click the marker icon in Activity Bar (left side)
  2. See all markers in current file and project
  3. Click any marker to jump to it

Keyboard Shortcut

Jump to next marker:

{
  "key": "ctrl+shift+t",
  "command": "smart-todo.focusNext"
}
Enter fullscreen mode Exit fullscreen mode

Settings 

{
  "smart-todo.markersToHighlight": ["TODO", "FIXME", "HACK", "BUG"],
  "smart-todo.excludePatterns": ["node_modules/**", "dist/**"],
  "smart-todo.showStatusBar": true,
  "smart-todo.showOverviewRuler": true,
  "smart-todo.caseSensitive": false
}
Enter fullscreen mode Exit fullscreen mode

Real-World Use Cases

Case Study 1: Code Review

Situation: You're reviewing a PR from your teammate.

Before:

  • Read code line by line
  • Hope you catch their TODOs
  • Some slip through to production

After:

  • Open Smart TODO Highlighter sidebar
  • See all 8 TODOs and 2 FIXMEs
  • Review each one
  • Ask: "Can we handle these before shipping?"

Case Study 2: Before Deploying

Situation: You're about to deploy to production.

Check: Open Smart TODO sidebar

TODO: 5
FIXME: 2  ← STOP! Don't deploy if FIXME > 0
HACK: 3
Enter fullscreen mode Exit fullscreen mode

If you see FIXMEs or HACKs, delay the deploy. Fix them first.

Case Study 3: Onboarding

Situation: A new developer joins your team.

You tell them: "Check the Smart TODO sidebar. It shows everything that's incomplete or needs review."

They instantly see the project's debt and priorities.

Why This Improves Code Quality

  1. No Lost Work — TODOs don't disappear
  2. Better Prioritization — See what needs doing
  3. Cleaner Reviews — Reviewers check all markers
  4. Healthier Code — You know your technical debt
  5. Team Alignment — Everyone sees the same list

Common Questions

Q: Does it work with other languages?
A: Yes. Works with any language that has comments (JavaScript, Python, Go, Java, C#, Rust, etc.)

Q: Can I customize what counts as a marker?
A: Yes. Add your own patterns in settings:

{
  "smart-todo.customMarkers": ["DEPRECATED", "XXX", "REFACTOR"]
}
Enter fullscreen mode Exit fullscreen mode

Q: Does it search the entire project?
A: Yes. By default it scans your workspace (respects .gitignore).

Q: Can I export the list?
A: Yes. Right-click the marker list → "Export as CSV" or "Copy to Clipboard"

Pro Tip: Enforce Marker Usage

Add to your team's linting rules:

# ESLint rule: no-console in production, but allow TODO comments
rules: {
  "no-console": ["warn"],  // Warn on console.log
  // TODO: Replace with proper logging
}
Enter fullscreen mode Exit fullscreen mode

Your linter warns about bad code, your TODOs explain why it's there temporarily.

Installation & Quick Start

Install Smart TODO Highlighter

Next Step:

  1. Open a project
  2. Find a few TODO comments (or add them)
  3. Watch them highlight
  4. Click the marker icon in Activity Bar
  5. See all markers listed in sidebar

How many TODOs are hiding in your codebase right now? Use the extension to find out! 👇

Keywords: vscode, productivity, code-organization, todo, markers, best-practices

Top comments (0)