Log Highlighter

A VS Code extension to highlight, manage, and remove console statements and custom logger patterns in your code.

Features

• Highlight Console Statements - Instantly highlight console.log, console.warn, console.error, console.info, and console.debug with distinct colors
• Custom Logger Support - Add your own patterns for custom loggers (NestJS, Winston, Pino, etc.)
• Framework Presets - Built-in presets for popular logging frameworks
• Multi-line Support - Correctly handles multi-line console statements with nested parentheses
• One-Click Removal - Remove all highlighted statements from your code with a single click
• Editor Toolbar Button - Quick access from the editor title bar

Installation

From Source

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

Usage

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 menu

Menu Options

Color Scheme

Console Methods

Framework Presets

Configuration

Enable Framework Presets

1. Click the filter icon in editor title bar
2. Select "Manage Presets"
3. Click on a preset to enable/disable it

Or add to your settings.json:

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

Add Custom Patterns

Add custom patterns in your settings.json:

{
  "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, customLog)
• color - Hex color for highlighting (e.g., #ff6b6b)

Supported File Types

• JavaScript (.js, .mjs, .cjs)
• TypeScript (.ts, .mts, .cts)
• React (.jsx, .tsx)
• Vue (.vue)
• Svelte (.svelte)

Commands

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

Edge Cases Handled

The extension correctly handles:

• 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

# Install dependencies
npm install

# Build
npm run build

# Watch mode
npm run watch

# Package
vsce package

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.

Changelog

0.0.1

• Initial release
• Console statement highlighting (log, warn, error, info, debug)
• Multi-line statement support
• Framework presets (NestJS, Winston, Pino, Bunyan, Log4js)
• Custom pattern support
• One-click removal of highlighted statements