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
- Open VS Code
- Go to the Extensions view (Ctrl+Shift+X)
- Search for "Highlight Consoles"
- Click Install
Usage
The extension works out of the box with default settings. To customize the highlighting:
- Open VS Code Settings (Ctrl+,)
- Search for "Highlight Consoles"
- 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
}
- 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
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