Pretty Log

A VS Code extension for quickly adding styled console.log statements to your code with distinctive emoji markers. Make your debugging more visual and organized! No more staring into cluttered log output to find variables - use JSON formatting to add proper indentation to your logs. And customize how your console.logs appear.

Table of Contents

• Quick Start
• Features
• Examples
  • Basic Logging
  • JSON Stringified Logging
  • Debug Logging
  • Error Logging
• Customization
  • Emoji Customization
  • Configuration Options
  • Customizing Keyboard Shortcuts
• Release Notes

Quick Start

1. Select or place the cursor near any variable or expression in your code
2. Use one of the keyboard shortcuts:
   • Alt + / (Option + / on Mac) for basic logging
   • Alt + ' (Option + ' on Mac) for JSON formatted logs
   • Alt + 1 for Debug log
   • Alt + 2 for Error log

Features

• ✅ Quick Insertion: Add console logs with just a keyboard shortcut
• ✅ Visual Markers: Easily spot your logs with distinctive emoji markers
• ✅ JSON Formatting: Beautiful JSON output with proper indentation for nested logs
• ✅ Source Tracking: Quickly locate logs with file names and line numbers
• ✅ Code Friendly: Preserves your code's indentation and formatting
• ✅ Customizable: Personalize emoji markers and output format

Examples

Basic Logging (Alt + /)

// Your code
const user = { name: 'John', age: 30 };
user  // <- have the cursor anywhere in the word and press Alt + /

// Result:
console.log('🧑‍💻app.js:2=>', user, '<===🛑');

// Output in your console: 
// 🧑‍💻app.js:2=> { name: 'John', age: 30 } <===🛑

JSON Stringified Logging (Alt + ')

// Your code
const user = { name: 'John', age: 30 };
user  // <- have the cursor anywhere in the word and press Alt + '

// Result:
console.log('🧑‍💻app.js:2=>', JSON.stringify(user, null, 2), '<===🛑');

// Output in your console:
// 🧑‍💻app.js:2=> {
//   "name": "John",
//   "age": 30
// } <===🛑

Debug Logging (Alt + 1)

// Your code
const isAuthenticated = false;
isAuthenticated  // <- have the cursor anywhere in the word and press Alt + 1

// Result:
console.debug('🐞 DEBUG app.js:2👉', isAuthenticated, '👈 🛑');

// Output in your console: 
// 🐞 DEBUG app.js:2👉 false 👈 🛑

Error Logging (Alt + 2)

// Your code
const errorMessage = "Invalid user credentials";
errorMessage  // <- have the cursor anywhere in the word and press Alt + 2

// Result:
console.error('❌ ERROR app.js:2👉', errorMessage, '👈 🛑');

// Output in your console: 
// ❌ ERROR app.js:2👉 Invalid user credentials 👈 🛑

Customization

Emoji Customization

To customize emojis:

1. Open VS Code Settings:

   • Press Cmd + , (Mac) or Ctrl + , (Windows/Linux)
   • Or go to Code > Preferences > Settings

2. In the search bar, type "Pretty Log > Emoji"

3. Edit any field to add your preferred emoji or text

4. Changes apply immediately to new log statements

To reset to default emojis, hover over the setting and click the "Reset Setting" icon (curved arrow).

Configuration Options

You can customize which elements appear in your logs:

To customize these options:

1. Open VS Code Settings (Cmd+, or Ctrl+,)
2. Search for "Pretty Log"
3. Toggle the options as desired

Customizing Keyboard Shortcuts

To customize these shortcuts:

1. Open VS Code Settings
2. Go to Keyboard Shortcuts (Ctrl+K Ctrl+S or Cmd+K Cmd+S on Mac)
3. Search for "Pretty Log" to see all available commands
4. Click the pencil icon next to any command and set your preferred key combination

Alternatively, edit your keybindings.json file directly:

{
  "key": "ctrl+alt+l",
  "command": "prettyLog.insertBasicLog",
  "when": "editorTextFocus"
}

Release Notes

See CHANGELOG.md for detailed release notes.