Fade Logger Lines - VSCode Extension

Fade Logger Lines is a Visual Studio Code extension designed to help developers visually de-emphasize logging and console statements in their code. This extension fades out lines containing logger, console, or any other specified keyword, allowing you to focus on the core logic of your code without being distracted by log outputs.

Features

• Automatically fade out lines containing logger or console statements.
• Supports multi-line statements, so even if a log statement spans multiple lines, it will be properly faded.
• Customizable fade color: Change the color used to fade logger, console lines, or other specific keywords via VSCode settings.
• Single-line handling: Option to configure specific keywords (like cart) to only fade single lines.
• Retrieves and can process the first character of each line to apply conditional logic or further customization.

Example

logger.debug('This line will be faded out');

console.log('This will also be faded');

if (condition) {
  // This part will not be faded
}

How It Works

1. Fading Logger and Console Lines:

   • The extension detects any lines in your code containing logger, console, or custom-defined keywords.
   • It applies a fade effect (customizable color) to de-emphasize those lines.
   • You can configure whether the fade applies to single lines (e.g., cart) or multiline log statements (e.g., console.log).

2. Customizing Fade Color:

   • You can set the fade color by modifying the extension's settings. The default fade color is grey (#808080), but you can customize it for different regex patterns.
   • You can now configure specific regex patterns for different keywords and assign them their own colors in the settings.

3. Retrieving the First Character of Each Line:

   • The extension retrieves the first character of each line and logs or processes it. This allows for additional conditions or customization based on the character.

Configuration Example in settings.json

You can configure specific regex patterns and colors in your settings.json as follows:

{
  "fadeLoggerLines.highlightForRegex": [
    {
      "regex": "(console|logger)\\s*\\.\\s*(log|warn|error|info|debug)\\s*\\(",
      "color": "#808080"  // Grey for logger and console statements
    },
    {
      "regex": "cart",
      "color": "#FF0000"  // Red for lines containing 'cart'
    }
  ]
}

Usage

1. Fade Logger and Console Lines:
   • Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
   • Type Fade Logger Lines and press Enter.
   • The extension will search for logger, console, or custom keywords (like cart) in the active editor and fade them out.

Extension Settings

This extension supports the following customizable settings:

To customize the fade color and specific keywords, add the following to your settings.json:

{
  "fadeLoggerLines.highlightForRegex": [
    {
      "regex": "(console|logger)\\s*\\.\\s*(log|warn|error|info|debug)\\s*\\(",
      "color": "#808080"  // Grey for logger and console statements
    },
    {
      "regex": "cart",
      "color": "#FF0000"  // Red for lines containing 'cart'
    }
  ]
}

Known Issues

• The extension only fades logger, console, and other specified keywords (like cart) based on your configuration. For additional loggers or debugging tools, feel free to submit a feature request.