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

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

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

Commands

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

Edge Cases Handled

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

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

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

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

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