Log Highlighter for VS Code

Find, highlight, and clean up console statements in seconds.
Color-coded highlighting for console.log, console.warn, console.error, and more.
One-click removal. Framework presets. Custom patterns.

Install in VS Code  •  Report Issue  •  GitHub

---

Features

	Feature	Description
🎨	Color-Coded Highlights	Each console method gets its own distinct color
🗑️	One-Click Removal	Remove all highlighted log statements with a single click
📦	Framework Presets	Built-in support for NestJS, Winston, Pino, Bunyan, Log4js
🔍	Smart Parsing	Handles multi-line statements, nested parens, template literals
⚙️	Custom Patterns	Define your own logger patterns with custom colors
🌐	Multi-Language	JS, TS, JSX, TSX, Vue, and Svelte

---

Quick Start

1. Open any JavaScript/TypeScript file
2. Click the filter icon in the editor title bar (top right)
3. Select what you want to highlight from the dropdown

---

Installation

VS Code Marketplace

code --install-extension littleboy.log-highlighter-vscode

Or search "Log Highlighter" in the VS Code Extensions sidebar.

From Source

git clone https://github.com/LittleBoy9/log-highliter.git
cd log-highlighter
npm install
npm run build
vsce package
code --install-extension log-highlighter-*.vsix

---

Color Scheme

Console Methods

Method	Color	Preview
console.log	Blue
console.warn	Yellow
console.error	Red
console.info	Cyan
console.debug	Magenta

Framework Presets

Framework	Color	Example Patterns
NestJS	Red	this.logger.log, Logger.error, this.logger.verbose
Winston	Green	logger.info, logger.error, logger.silly
Pino	Teal	logger.info, logger.trace, logger.fatal
Bunyan	Orange	log.info, log.error, log.fatal
Log4js	Purple	logger.info, logger.debug, logger.fatal

---

Menu Options

Option	Description
Highlight All Console	Highlights all console.log/warn/error/info/debug
console.log / warn / error / info / debug	Highlight a specific method only
Highlight All Custom	Highlight all enabled presets and custom patterns
Manage Presets	Enable/disable framework presets
Remove Highlighted	Delete highlighted statements from code
Clear Highlights	Remove highlights without deleting code

---

Configuration

Enable Framework Presets

Add to your settings.json:

{
  "logHighlighter.enabledPresets": ["nestjs", "winston", "pino"]
}

Or use the menu: Filter icon → Manage Presets to toggle them interactively.

Add Custom Patterns

{
  "logHighlighter.customPatterns": [
    {
      "name": "My Logger",
      "pattern": "myLogger.log",
      "color": "#ff6b6b"
    },
    {
      "name": "Debug Print",
      "pattern": "debugPrint",
      "color": "#4ecdc4"
    }
  ]
}

Each custom pattern requires:

• name — Display name shown in the menu
• pattern — Text to match (e.g., myLogger.info)
• color — Hex color for highlighting (e.g., #ff6b6b)

---

Supported File Types

Language	Extensions
JavaScript	.js, .mjs, .cjs
TypeScript	.ts, .mts, .cts
React	.jsx, .tsx
Vue	.vue
Svelte	.svelte

---

Commands

All commands available via Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

Command	Description
Log Highlighter: Show Menu	Open the main menu
Log Highlighter: Highlight All Console Statements	Highlight all console methods
Log Highlighter: Highlight console.log	Highlight console.log only
Log Highlighter: Highlight console.warn	Highlight console.warn only
Log Highlighter: Highlight console.error	Highlight console.error only
Log Highlighter: Highlight console.info	Highlight console.info only
Log Highlighter: Highlight console.debug	Highlight console.debug only
Log Highlighter: Highlight Custom Patterns	Highlight all custom patterns
Log Highlighter: Manage Framework Presets	Open preset manager
Log Highlighter: Remove All Highlighted Statements	Delete highlighted code
Log Highlighter: Clear All Highlights	Remove highlights only

---

Edge Cases Handled

Multi-line statements

console.log(
  "Hello",
  { data: value },
  someFunction()
);

Nested parentheses

console.log(calculate(a, b), process(x, y));

Template literals

console.log(`Value: ${getValue()}`);

Multiple statements on one line

console.log(a); console.warn(b);

Chained method calls

console.log(obj.method().property);

---

Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

npm install       # Install dependencies
npm run build     # Build
npm run watch     # Watch mode
vsce package      # Package as .vsix

Project Structure

log-highlighter/
├── src/
│   ├── extension.ts      # Main entry point
│   ├── commands.ts       # Command handlers
│   ├── consoleParser.ts  # Multi-line parser
│   ├── decorator.ts      # Decoration manager
│   └── types.ts          # Type definitions
├── package.json          # Extension manifest
├── tsconfig.json         # TypeScript config
└── esbuild.js            # Build script

---

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

License

MIT License — see LICENSE for details.

---

Built by Sounak Das