Highlight Consoles

⚠️ Disclaimer ⚠️

This is not the official Visual Studio Code or Microsoft extension. This is a community-created extension that enhances debugging experience by highlighting console methods with customizable colors and styles in JavaScript, TypeScript, and C# files.

Features

Console Method Highlighting

• Highlights different console methods with distinct colors:
  • console.log - Teal (#4EC9B0) (case-sensitive, lowercase only)
  • console.warn - Yellow (#DCDCAA) (case-sensitive, lowercase only)
  • console.error - Red (#F44747) (case-sensitive, lowercase only)
  • console.table - Blue (#9CDCFE) (case-sensitive, lowercase only)
  • Console.Write - Blue (#569CD6) (case-sensitive, proper casing)
  • Console.WriteLine - Blue (#569CD6) (case-sensitive, proper casing)
• Customizable colors and opacity for each console method
• Whole line highlighting with left border
• Bold method names for better visibility
• Supports JavaScript, TypeScript, and C# files (including JSX/TSX)
• Case-sensitive highlighting:
  • JavaScript/TypeScript console methods must be lowercase (e.g., console.log)
  • C# Console methods must use proper casing (e.g., Console.WriteLine)

Installation

1. Open VS Code
2. Go to the Extensions view (Ctrl+Shift+X)
3. Search for "Highlight Consoles"
4. Click Install

Usage

The extension works out of the box with default settings. To customize the highlighting:

1. Open VS Code Settings (Ctrl+,)
2. Search for "Highlight Consoles"
3. Modify the colors and opacity settings as desired

Available Settings

Console Method Settings

{
    "highlightConsoles.consoleLogColor": "#4EC9B0",
    "highlightConsoles.consoleWarnColor": "#DCDCAA",
    "highlightConsoles.consoleErrorColor": "#F44747",
    "highlightConsoles.consoleTableColor": "#9CDCFE",
    "highlightConsoles.consoleWriteColor": "#569CD6",
    "highlightConsoles.consoleWriteLineColor": "#569CD6",
    "highlightConsoles.consoleBackgroundOpacity": 20
}

Color Format

• Colors should be specified in hex format (e.g., "#FF5733")
• Opacity values range from 0 to 100

Features in Detail

Console Method Highlighting

• Each console method has its own distinct color for easy identification
• Methods are highlighted with a background color and left border
• Method names are displayed in bold for better visibility
• Whole line highlighting makes it easy to spot console statements
• Supports both JavaScript/TypeScript console methods and C# Console methods

Supported Languages

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• C# (.cs)

Requirements

• VS Code version 1.60.0 or higher
• JavaScript or TypeScript files

Extension Settings

This extension contributes the following settings:

• highlightConsoles.consoleLogColor: Color for console.log (default: #4EC9B0)
• highlightConsoles.consoleWarnColor: Color for console.warn (default: #DCDCAA)
• highlightConsoles.consoleErrorColor: Color for console.error (default: #F44747)
• highlightConsoles.consoleTableColor: Color for console.table (default: #9CDCFE)
• highlightConsoles.consoleWriteColor: Color for Console.Write (default: #569CD6)
• highlightConsoles.consoleWriteLineColor: Color for Console.WriteLine (default: #569CD6)
• highlightConsoles.consoleBackgroundOpacity: Background opacity for console methods (0-100, default: 20)

Known Issues

• None at the moment.

Release Notes

See the CHANGELOG.md file for release notes.

Contributing

Feel free to open issues or submit pull requests for any improvements or bug fixes.

License

This extension is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Inspired by the need for better code readability and debugging experience
• Thanks to the VS Code team for their extensible editor & excellent extension API
• Thanks to all contributors who have helped improve this extension

Support

If you find this extension helpful, please consider:

• Sharing the extension
• Starring the repository
• Reporting bugs
• Suggesting new features