LogMate

LogMate is a lightweight VS Code extension that lets you select a variable or expression and instantly generate a contextual debug statement containing the filename, line number, variable name, and runtime value.

Smart, contextual logging for VS Code.

Select variable/expression
        ↓
Ctrl + Shift + Q
        ↓
LogMate generates contextual log

Example

const userName = "Gopi";

Highlight userName and press Ctrl + Shift + Q:

const userName = "Gopi";
console.log("[app.js:1] userName:", userName);

Features

• ⚡ Instant Contextual Logging: One keystroke (Ctrl+Shift+Q) to log any variable or expression.
• 📄 Context-Rich Output: Includes filename and accurate 1-based editor line number.
• 📐 Formatting Preservation: Preserves indentation (spaces or tabs), line endings (LF or CRLF), and never overwrites or alters existing code.
• 🎨 Visually Distinguishable Logs: Optional styling (CSS %c in JavaScript/TypeScript browser devtools, ANSI escape codes in Python terminal environments).
• 🧩 Multi-Language Architecture: Clean, modular generator registry supporting JavaScript, TypeScript, Python, Java, C#, PHP, Ruby, Go, C, and C++.
• ⚙️ Customizable: Control filename inclusion, line numbers, quote style, semicolons, and output formats (full, simple, object).

Usage

1. Highlight any variable or expression in your code editor.
2. Press Ctrl + Shift + Q (Windows, Linux, macOS).
   • Alternatively, open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and select LogMate: Log Selected Variable.
3. A clean debug statement is inserted right below your selection.

Supported Languages & Outputs

Selection Behavior

1. Single Variable

Select userName:

console.log("[app.js:1] userName:", userName);

2. Expression

Select user.profile.name:

console.log("[app.js:10] user.profile.name:", user.profile.name);

3. Accidental Trailing Punctuation

If you accidentally select userName; or userName,, the trailing punctuation is automatically stripped so you never get syntax errors.

4. Multi-Line Selection

When an expression spans multiple lines (e.g. chained methods or wrapped arguments), LogMate collapses line breaks and internal indentation into a clean single-line representation, inserting the statement immediately after the last line of the selection.

5. Empty Selection

If no text is selected (or only whitespace is selected), LogMate does not insert any code and informs you with:

Please select a variable or expression first.

Configuration

Customize LogMate through VS Code Settings (Settings → Extensions → LogMate or in settings.json):

Visual Styling Example

When logmate.highlightVariable is set to true:

JavaScript/TypeScript:

console.log(
  "%c[app.js:15] %cuserName:",
  "color: gray",
  "color: cyan; font-weight: bold",
  userName
);

Python:

print("\033[90m[app.py:15]\033[0m \033[1;36muserName:\033[0m", userName)

Keyboard Shortcuts

Note: On macOS, Ctrl + Shift + Q is used to avoid interfering with the macOS system "Log Out" shortcut (Cmd + Shift + Q).

Local Development & Testing

Prerequisites

• Node.js (v18 or higher)
• npm

Setup

# Clone the repository
git clone https://github.com/ChitturiGopiKrishna/logmate.git
cd logmate

# Install dependencies
npm install

Running Unit Tests

npm test

Compiling and Linting

npm run compile
npm run lint

Launching in VS Code Extension Host

1. Open this repository in VS Code.
2. Press F5 (or select Run → Start Debugging from the top menu).
3. A new Extension Development Host VS Code window will launch with the extension activated.
4. Open or create any code file (e.g. test.js or test.py), select a variable, and press Ctrl + Shift + Q.

Packaging into .vsix

To generate an offline installable VSIX package:

npm run package

This generates logmate-0.1.0.vsix in the project root.

Installing the .vsix Locally

You can install the generated .vsix file into your VS Code editor using:

Via CLI:

code --install-extension logmate-0.1.0.vsix

Via VS Code UI:

1. Open the Extensions view (Ctrl+Shift+X / Cmd+Shift+X).
2. Click the ... (Views and More Actions) menu in the top right of the Extensions pane.
3. Select Install from VSIX...
4. Choose logmate-0.1.0.vsix.

Publishing to VS Code Marketplace

When you are ready to publish:

1. Create a Publisher: Go to the Visual Studio Marketplace Management Portal and create your publisher ID.
2. Generate a Personal Access Token (PAT): In Azure DevOps, create a Personal Access Token with the Marketplace (Publish) scope.
3. Update package.json: Update "publisher": "your-publisher-name" and repository URLs in package.json.
4. Publish:

   npx @vscode/vsce login your-publisher-name
   npx @vscode/vsce publish
   

Architecture & Extensibility

LogMate uses a modular generator registry architecture:

src/
├── commands/
│   └── printSelectedVariable.ts  # Coordinates editor, selection, and registry
├── generators/
│   ├── types.ts                  # LogGenerator and options contracts
│   ├── generatorRegistry.ts      # Language ID lookup & fallback
│   ├── base.ts                   # Formatting helpers
│   ├── javascript.ts             # JavaScript generator
│   ├── typescript.ts             # TypeScript generator
│   ├── python.ts                 # Python generator
│   ├── java.ts                   # Java generator
│   ├── csharp.ts                 # C# generator
│   ├── php.ts                    # PHP generator
│   ├── ruby.ts                   # Ruby generator
│   ├── go.ts                     # Go generator
│   ├── c.ts                      # C generator
│   └── cpp.ts                    # C++ generator
└── utils/
    ├── config.ts                 # Configuration reader (logmate namespace)
    ├── indentation.ts            # Indentation preservation
    ├── languageDetection.ts      # Language ID & extension resolver
    ├── lineNumber.ts             # 1-based line number resolver
    └── selection.ts              # Selection validation & multi-line sanitization

Adding a new language is as simple as creating a new generator implementing the LogGenerator interface and registering it in generatorRegistry.ts.

License

MIT