MTLB VS Code Extension

Share code snippets and developer stories directly from VS Code to the MakeTheLogoBigger community.

Features

• Code Snippet Sharing - Share selected code with syntax highlighting
• Error Tracking - Document bugs and fixes with context
• Developer Stories - Share insights, wins, and lessons learned
• Git-Aware - Automatically includes branch and repository context
• Syntax Highlighting - 20+ languages supported
• User Limits - Tier-based posting limits with real-time countdown
• Category Tags - Organize posts with relevant categories
• Character Counter - Real-time feedback with smart warnings
• Draft Auto-Save - Automatic draft saving with visual "Draft saved" indicator
• Status Bar Stats - See your posting limits at a glance (e.g., "MTLB: 3/10 posts")
• Code Editor - Rich code editor with syntax highlighting and formatting
• Secret Scanning - Prevents accidental API key exposure before posting
• Privacy Controls - Sanitizes Git URLs and allows hiding file paths
• Help System - Tabbed help modal with Features and Tips & Tricks sections, keyboard shortcuts, and documentation links

Installation

From VS Code Marketplace

1. Open VS Code
2. Click the Extensions icon in the sidebar (or press Cmd+Shift+X / Ctrl+Shift+X)
3. Search for "MakeTheLogoBigger"
4. Click "Install"

Note: The extension is currently in beta. If it's not yet available in the marketplace, please check back soon or contact support@makethelogobigger.co for early access.

Usage

Quick Start

1. Sign In

   • Open Command Palette (Cmd+Shift+P)
   • Type "MTLB: Sign In"
   • Follow authentication steps

2. Share Code Snippet

   • Select code in your editor
   • Right-click → "Share to MakeTheLogoBigger" → "Share Code Snippet"
   • Or use keyboard shortcut: Cmd+Alt+M (Mac) / Ctrl+Alt+M (Win/Linux)
   • Add description and categories
   • Click "Share Post"

   Note: Posts are automatically checked for spam and inappropriate content before being published to maintain community quality.

3. Share Error/Bug

   • Select problematic code (optional)
   • Right-click → "Share to MakeTheLogoBigger" → "Share Error/Bug"
   • Or use keyboard shortcut: Cmd+Alt+B (Mac) / Ctrl+Alt+B (Win/Linux)
   • Describe the issue
   • Choose "Coding Fails" category

4. Quick Post with Categories

   • Press Cmd+Alt+Q (Mac) / Ctrl+Alt+Q (Win/Linux)
   • Or right-click → "Share to MakeTheLogoBigger" → "Quick Post with Category Picker"
   • Select categories from the quick pick menu
   • Add your content and share

5. Create Text Post

   • Right-click → "Share to MakeTheLogoBigger" → "Create Text Post"
   • Or Command Palette → "MTLB: Create Text Post"
   • Share insights without code

Commands

Note: Keyboard shortcuts can be customized in VS Code's Keyboard Shortcuts editor (Cmd+K Cmd+S on macOS or Ctrl+K Ctrl+S on Windows/Linux).

Post Data Structure

Posts created from VS Code include:

{
  content: "Your post text",
  categories: ["coding-wins", "bug-chronicles"],
  source: "vscode-extension",
  hasCodeSnippet: true,
  codeSnippet: {
    content: "const foo = ...",
    language: "javascript",
    fileName: "debounce.js",
    filePath: "utils/debounce.js",
    lineNumbers: { start: 1, end: 12 }
  },
  gitContext: {
    branch: "feature/search",
    repoName: "my-app"
  }
}

Supported Languages

The extension supports syntax highlighting for:

Web: JavaScript, TypeScript, JSX, TSX, HTML, CSS, SCSS, SASS, LESS, Vue

Backend: Python, Java, C#, C++, C, Go, Rust, PHP, Ruby, Swift, Kotlin

Other: SQL, GraphQL, JSON, YAML, Markdown, XML, Bash, PowerShell, Dockerfile

Interface Languages

The extension interface is available in:

• English - Default
• Español (Spanish)
• Français (French)

VS Code automatically uses your system language preference. To change the display language, update your VS Code language settings.

Categories

• General - General posts and discussions
• Client Stories - Tales from client interactions
• Deadline Nightmares - Last-minute rushes and time crunches
• Coding Fails - Bugs, errors, and coding mishaps
• CSS Nightmares - CSS troubles and styling challenges
• Client Feedback - Client requests and feedback
• Design Terminology - Design jargon and terminology
• Inspiration - Inspiring ideas and motivation
• Tools & Resources - Helpful tools and resources

User Limits

MTLB enforces tier-based posting limits:

When limits are reached, the extension shows a countdown timer with the exact time until you can post again.

Configuration

Settings

Configure the extension via VS Code Settings:

{
  // Automatically include Git context in posts
  "mtlb.autoDetectGitContext": true,

  // Default category for new posts
  "mtlb.defaultCategory": "uncategorized",

  // Include file path in shared code snippets
  "mtlb.includeFilePath": true,

  // Sanitize Git remote URLs (removes credentials)
  "mtlb.sanitizeGitUrls": true,

  // Show confirmation dialog before posting
  "mtlb.confirmBeforePosting": false,

  // Automatically save drafts while composing posts
  "mtlb.enableAutoSave": true,

  // Enable anonymous telemetry (opt-in)
  "mtlb.telemetry": false
}

Access Settings

1. Open Settings (Cmd+, or Ctrl+,)
2. Search for "MTLB"
3. Modify settings as needed

Authentication

The extension uses Google OAuth for secure authentication:

1. Click "MTLB: Sign In" from the Command Palette or status bar
2. Your browser opens the Google sign-in page
3. Sign in with your Google account
4. Authorize the MTLB extension
5. Authentication completes automatically (no code entry required)

The extension uses a secure localhost callback server to complete authentication. Your credentials are stored securely using VS Code's SecretStorage API and never shared with third parties.

Troubleshooting

Extension Not Activating

• Check VS Code version (requires ^1.80.0)
• Reload VS Code window (Command Palette → "Developer: Reload Window")
• Check Output panel for errors

Authentication Issues

• Clear stored credentials:
  • Command Palette → "Developer: Clear Extension Host Secrets"
  • Restart VS Code
  • Sign in again

Code Snippet Not Captured

• Ensure you have text selected
• Check that the file has a recognized language
• Try saving the file first

Git Context Not Detected

• Verify Git extension is enabled
• Check that folder is a Git repository
• Ensure you have commits in the repository

Post Creation Fails

• Check your internet connection
• Verify you're signed in
• Check if you've reached posting limits
• Review Output panel for errors

Advanced Features

Secret Scanning

Automatically detects 30+ types of secrets and sensitive data:

• API keys (GitHub, OpenAI, AWS, Google, Stripe, etc.)
• Private keys (RSA, SSH, PGP)
• JWT tokens and database connection strings
• Hardcoded passwords and API secrets

Git Context Caching

Intelligent caching system reduces Git operations by 80%:

• 30-second cache TTL (Time To Live)
• Automatic cache invalidation on file save
• Faster response times for rapid code sharing

Draft Auto-Save

Automatic draft saving prevents accidental data loss:

• 1-second debounce for optimal performance
• Saves post content, categories, code snippets, and git context
• 24-hour draft expiration with automatic cleanup
• Workspace state persistence (survives VS Code restarts)
• Visual "Draft saved" indicator with checkmark icon and timestamp
• Smooth fade in/out animations positioned left of character counter (no layout shift)
• Automatic restoration when panel reopens
• ARIA live region for screen reader accessibility
• Can be disabled: Set mtlb.enableAutoSave to false in settings

Privacy Controls

Comprehensive data minimization features:

• File path privacy toggle
• Git URL sanitization (removes credentials)
• Pre-post confirmation dialog
• Workspace trust integration

Code Editor

Rich code editor with advanced features:

• Syntax highlighting for 20+ languages
• Code formatting with Prettier
• Find and replace functionality
• Download code as file
• Theme support (dark/light)
• Character limit enforcement

Changelog Notifications

Stay informed about new features and improvements:

• Automatic notification when extension updates to a new version
• One-click access to full changelog with "View Changelog" button
• Non-intrusive design (shows once per version, easy to dismiss)
• Version tracking across VS Code sessions
• Priority system: updated users see changelog, new users see keyboard shortcuts tip
• Opens CHANGELOG.md directly in VS Code for detailed release notes

Quality & Reliability

The MTLB extension is built with quality and reliability in mind:

• Automated Testing: Every code change is automatically tested across Windows, Mac, and Linux
• Comprehensive Test Suite: 160+ tests covering all core functionality
• Continuous Integration: Automated builds and quality checks ensure stability
• Regular Updates: Continuous improvements and bug fixes

Links

• MTLB Website: https://www.makethelogobigger.co
• Figma Plugin: https://makethelogobigger.co/figma-plugin-v2
• Chrome Extension: https://makethelogobigger.co/chrome-extension
• Terms of Service: https://www.makethelogobigger.co/terms
• Privacy Policy: https://www.makethelogobigger.co/privacy

Support

Need help? Reach out via:

• Email: support@makethelogobigger.co
• MTLB Community: https://www.makethelogobigger.co

Built with care for the MTLB developer community