🎨 Console Highlighter

A VS Code extension that highlights console statements in your code with colors, shows them in the Problems panel, and lets you pick exactly which methods to track.

Supported Languages

JavaScript and JSX files are not scanned to avoid noise from third-party libraries and bundled files.

Features

🌈 Color-coded Highlights

Each console method gets its own color directly in the editor:

🔍 Problems Panel

Every detected statement appears in the Problems panel (Ctrl+Shift+M) with severity levels:

• console.error → ❌ Error
• console.warn → ⚠️ Warning
• everything else → ℹ️ Information

Click any entry in the Problems panel to jump directly to that line.

🎛️ Pick Which Methods to Highlight

Choose exactly which methods you want to track using a checklist — no need to edit settings.json manually. Your selection is saved and shared across the project so teammates get the same setup automatically.

🔎 Workspace Scan

Scan your entire project at once and see all console statements across every .ts / .tsx file in the Problems panel. The scan only looks for the methods you have selected.

📍 Scrollbar Markers

Colored marks appear in the overview ruler (right-side scrollbar) so you can spot console statements even when scrolled far away from them.

🚫 Smart Exclusions

The following folders are automatically skipped during workspace scans so you never see noise from generated or third-party files:

Commands

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type:

How to Select Methods

1. Press Ctrl+Shift+P → Console Highlighter: Select Methods
2. A checklist appears with all available methods
3. Use Space to check / uncheck each one
4. Press Enter to confirm

Only the methods you selected will be highlighted and shown in the Problems panel. Your selection is saved to both your personal settings and the project's .vscode/settings.json so everyone on the team uses the same configuration.

Default: console.log only — on a fresh install the extension will never scan all methods unexpectedly.

Settings

You can also configure manually in settings.json:

// Enable or disable the extension
"consoleHighlighter.enabled": true,

// Methods to highlight — only these will be scanned and highlighted
"consoleHighlighter.methods": ["log", "warn", "error"]

To open your settings file: Ctrl+Shift+P → Open User Settings (JSON)

For project-level settings (shared with teammates): Ctrl+Shift+P → Open Workspace Settings (JSON)

Installation

From VSIX (recommended for sharing)

1. Open VS Code
2. Ctrl+Shift+P → Extensions: Install from VSIX
3. Select the .vsix file
4. Reload VS Code when prompted
5. Open any .ts or .tsx file — highlighting starts automatically

Development Mode

1. Clone or download this project
2. Open the folder in VS Code
3. Press F5 to launch the Extension Development Host
4. Open any .ts or .tsx file — highlighting starts automatically

Project Structure

console-highlighter/
├── package.json        — extension manifest & configuration
├── readme.md           — this file
├── images/
│   └── icon.png        — extension icon
└── src/
    └── extension.js    — all extension logic