Flutter Easy Logger Extension for VS Code

A VS Code extension that helps you quickly add logging statements to your Dart code. The extension allows you to insert customizable log statements with different log levels (debug, info, warning, error, success) while automatically handling string interpolation.

Features

Quick insertion of log statements with different severity levels
Automatic string interpolation for Dart variables
Preserves code indentation
Customizable logger class name and method names
Support for both simple variables and object properties

Installation

Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "Flutter Easy Logger"
Click Install

Usage

Select a variable or expression in your Dart code
Use one of the following commands to insert a log statement:
- Add Debug Log
- Add Info Log
- Add Warning Log
- Add Error Log
- Add Success Log

Example

If you have this Dart code and select the variable userName:

String userName = 'John';

Using "Add Info Log" command will insert:

String userName = 'John';
AppLog.info('userName: $userName');

If you select a property like user.email, it will properly interpolate:

AppLog.info('user.email: ${user.email}');

Keyboard Shortcuts

Windows/Linux

Debug Log: Ctrl+Alt+D
Info Log: Ctrl+Alt+I
Warning Log: Ctrl+Alt+W
Error Log: Ctrl+Alt+E
Success Log: Ctrl+Alt+S

macOS

Debug Log: Control ⌃ + Option ⌥ + D
Info Log: Control ⌃ + Option ⌥ + I
Warning Log: Control ⌃ + Option ⌥ + W
Error Log: Control ⌃ + Option ⌥ + E
Success Log: Control ⌃ + Option ⌥ + S

You can customize these shortcuts in VS Code's Keyboard Shortcuts settings (File > Preferences > Keyboard Shortcuts).

Configuration

You can customize the logger class name and method names through VS Code settings:

Open VS Code Settings (File > Preferences > Settings)
Search for "Custom Logging"
Modify the following settings:

{
    "customLogging.loggerClass": "AppLog",  // Change the logger class name
    "customLogging.methodNames": {
        "debug": "debug",     // Change debug method name
        "success": "success", // Change success method name
        "info": "info",       // Change info method name
        "error": "error",     // Change error method name
        "warning": "warning"  // Change warning method name
    }
}

Example Logger Configuration

If you want to use a Logger class and method names:

{
    "customLogging.loggerClass": "Logger",
    "customLogging.methodNames": {
        "debug": "d",
        "success": "s",
        "info": "i",
        "error": "e",
        "warning": "w"
    }
}

This would generate logs like:

Logger.d('userName: $userName');

Example Custom Logger Configuration

If you want to use a your own custom logger class and method names:

import 'dart:developer';

import 'package:flutter/foundation.dart';

enum LogLevel {
  success,
  info,
  warning,
  debug,
  error,
}

class AppLog {
  AppLog._();

  static LogLevel _currentLogLevel = LogLevel.info;

  static bool enableReleaseLogging = false;

  static final Map<LogLevel, LogStyle> _styles = {
    LogLevel.success: const LogStyle(emoji: '🟢', colorCode: '32'),
    LogLevel.info: const LogStyle(emoji: '🔵', colorCode: '36'),
    LogLevel.warning: const LogStyle(emoji: '🟠', colorCode: '33'),
    LogLevel.error: const LogStyle(emoji: '🚫', colorCode: '31'),
    LogLevel.debug: const LogStyle(emoji: '⚪️', colorCode: '37'),
  };

  static String get _getCurrentTime {
    final DateTime now = DateTime.now();
    return '${now.hour}:${now.minute}:${now.second}';
  }

  static void setLogLevel(LogLevel level) {
    _currentLogLevel = level;
  }

  static void success(String message, [String tag = 'Success']) =>
      _log(message, tag, LogLevel.success);

  static void info(String message, [String tag = 'Info']) =>
      _log(message, tag, LogLevel.info);

  static void warning(String message, [String tag = 'Warning']) =>
      _log(message, tag, LogLevel.warning);

  static void debug(String message, [String tag = 'Debug']) =>
      _log(message, tag, LogLevel.debug);

  static void error(String message,
          [String tag = 'Error', Map<String, dynamic>? metadata]) =>
      _log(message, tag, LogLevel.error, metadata: metadata);

  static void _log(
    String message,
    String tag,
    LogLevel level, {
    Map<String, dynamic>? metadata,
  }) {
    if ((kDebugMode || enableReleaseLogging) &&
        level.index >= _currentLogLevel.index) {
      final style = _styles[level]!;
      final metaInfo =
          metadata != null ? ' | Metadata: ${metadata.toString()}' : '';
      log(
        '${style.emoji} \x1B[${style.colorCode}m$tag: $message$metaInfo\x1B[0m',
        name: _getCurrentTime,
        level: level.index,
      );
    }
  }

  static void setLogStyle(LogLevel level, LogStyle style) {
    _styles[level] = style;
  }
}

class LogStyle {
  const LogStyle({required this.colorCode, required this.emoji});
  final String colorCode;
  final String emoji;
}

This would generate logs like:

AppLog.error('$error');

Requirements

VS Code 1.60.0 or higher
Dart/Flutter project

License

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

Flutter Easy Logger

Essa Sabbagh