Monaco Error Lens

Adaptation of VSCode Error Lens extension: makes diagnostics more prominent through inline messages, line highlighting, and gutter icons.

⚠️ Experimental Software: This library is experimental and was largely LLM-generated as an adaptation of the VSCode Error Lens extension. Use with caution!!

Features

• 🔍 Inline Messages - Show diagnostic text directly at the end of problematic lines
• 🎨 Line Highlighting - Color entire lines containing problems with configurable backgrounds
• 📍 Gutter Icons - Display severity icons in the editor gutter
• 🔧 Configurable - Extensive customization options

Installation

npm install monaco-error-lens

Usage

Basic Setup

import * as monaco from 'monaco-editor';
import { MonacoErrorLens } from 'monaco-error-lens';

// Create Monaco editor
const editor = monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world!");',
  language: 'typescript',
  glyphMargin: true, // Enable gutter icons
});

// Create Error Lens instance
const errorLens = new MonacoErrorLens(editor, monaco, {
  enableInlineMessages: true,
  enableLineHighlights: true,
  enableGutterIcons: true,
});

// Add some sample diagnostics
monaco.editor.setModelMarkers(editor.getModel(), 'typescript', [
  {
    startLineNumber: 1,
    startColumn: 1,
    endLineNumber: 1,
    endColumn: 8,
    message: 'Prefer const over let',
    severity: monaco.MarkerSeverity.Warning,
    source: 'eslint'
  }
]);

Advanced Configuration

import { MonacoErrorLens, createCustomTheme } from 'monaco-error-lens';

const errorLens = new MonacoErrorLens(editor, monaco, {
  enableInlineMessages: true,
  enableLineHighlights: true,
  enableGutterIcons: true,
  followCursor: 'activeLine', // Only show diagnostics for current line
  messageTemplate: '[{source}] {message}', // Custom message format
  maxMessageLength: 100, // Truncate long messages
  updateDelay: 200, // Debounce delay in ms
  colors: {
    error: {
      background: 'rgba(255, 0, 0, 0.1)',
      foreground: '#ff4444',
    },
    warning: {
      background: 'rgba(255, 165, 0, 0.1)',
      foreground: '#ff8800',
    }
  }
});

Factory Functions

For convenience, use the provided factory functions:

import { setupErrorLens, createMinimalErrorLens } from 'monaco-error-lens';

// Quick setup with recommended defaults
const errorLens = setupErrorLens(editor, monaco, {
  // Optional overrides
  messageTemplate: '[{source}] {message}',
});

// Minimal setup for better performance
const minimalErrorLens = createMinimalErrorLens(editor, monaco, {
  // Only inline messages, no line highlights or gutter icons
  maxMessageLength: 80,
});

Configuration Options

// Update configuration dynamically
errorLens.updateOptions({
  followCursor: 'activeLine',           // Show only current line diagnostics
  messageTemplate: '[{source}] {message}', // Custom message format
  maxMessageLength: 100,                // Truncate long messages
  colors: {
    error: {
      background: 'rgba(255, 0, 0, 0.1)',
      foreground: '#ff4444'
    }
  }
});

Control Methods

errorLens.toggle();         // Enable/disable
errorLens.enable();         // Enable explicitly
errorLens.disable();        // Disable explicitly
errorLens.refresh();        // Force update
errorLens.isActive();       // Check if active
errorLens.getConfig();      // Get current config
errorLens.getEventEmitter(); // Get event emitter
errorLens.dispose();        // Clean up resources

Event Handling

Monitor Error Lens events for advanced integrations:

const errorLens = new MonacoErrorLens(editor, monaco);
const eventEmitter = errorLens.getEventEmitter();

// Listen for decoration updates
eventEmitter.on('decorations-updated', (data) => {
  console.log(`Updated ${data.decorationCount} decorations for ${data.markerCount} markers`);
});

// Listen for configuration changes
eventEmitter.on('config-updated', (data) => {
  console.log('Configuration updated:', data.config);
});

// Listen for status changes
eventEmitter.on('status-changed', (data) => {
  console.log(`Error Lens ${data.enabled ? 'enabled' : 'disabled'}`);
});

// Listen for errors
eventEmitter.on('error', (data) => {
  console.error('Error Lens error:', data.error.message);
});

// Remove specific listener
const unsubscribe = eventEmitter.on('decorations-updated', handler);
unsubscribe(); // Remove this specific listener

// Remove all listeners for an event
eventEmitter.removeAllListeners('decorations-updated');

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | enableInlineMessages | boolean | true | Show diagnostic messages at end of lines | | enableLineHighlights | boolean | true | Highlight entire lines with problems | | enableGutterIcons | boolean | true | Show icons in the gutter | | messageTemplate | string | '{message}' | Template for formatting messages | | followCursor | 'allLines' \| 'activeLine' | 'allLines' | Which lines to show diagnostics for | | maxMessageLength | number | 200 | Maximum characters in inline messages | | updateDelay | number | 100 | Debounce delay for updates (ms) | | enabled | boolean | true | Enable or disable the extension | | colors | ErrorLensColors | Default theme | Custom colors for each severity |

CSS Classes

Generated CSS classes for customization:

• .monaco-error-lens-message - Inline message styling
• .monaco-error-lens-line-{severity} - Line background colors
• .monaco-error-lens-gutter-{severity} - Gutter icon styling

TypeScript Support

import type {
  ErrorLensOptions,
  ErrorLensTheme,
  ErrorLensStatus,
  DiagnosticDecoration
} from 'monaco-error-lens';

Live Example

To see Monaco Error Lens in action:

# 1. Clone the repository
git clone https://github.com/smucclaw/monaco-error-lens.git
cd monaco-error-lens

# 2. Install and build
npm i
npm run build

# 3. Serve the example locally
python3 -m http.server 8080
# or use any static file server

# 4. Open http://localhost:8080/example.html in your browser

The example demonstrates:

• ✅ Real package usage - Uses the actual built MonacoErrorLens class from dist/index.js
• 🔍 Inline error messages at the end of problematic lines
• 🎨 Line highlighting with color-coded backgrounds by severity
• 📍 Gutter icons showing severity indicators
• 🔧 Interactive controls to test different configurations

Development

# Install dependencies
npm install

# Development build with watch
npm run dev

# Run tests
npm test

# Lint and fix
npm run lint

# Build
npm run build

# Type check
npm run check

License

MIT

Acknowledgments

Adapted from the VSCode Error Lens extension.