Server ID

A Visual Studio Code extension that identifies which SSH server you are connected to and changes the editor's color scheme accordingly. This helps you quickly identify when you are working on production, staging, or development servers.

Features

• 🎨 Automatic Color Coding: Changes VSCode's title bar and status bar colors based on the SSH server you're connected to
• 🔍 Pattern Matching: Uses regex patterns to match hostnames
• ⚙️ Configurable: Customize server patterns and colors through VSCode settings or SSH config
• 🚀 Auto-Detection: Automatically detects SSH connections via environment variables
• 📁 SSH Config Support: Read colors directly from your ~/.ssh/config file using custom keys
• 🔄 Manual Reload: Status bar button to reload colors on demand

Visual Guide

When connected to different servers, the extension changes VSCode's appearance:

Production Server (Red):
┌────────────────────────────────────┐
│ ●●● VSCode [SSH: prod-server-01] │ ← Red title bar
├────────────────────────────────────┤
│                                    │
│  Your code here...                 │
│                                    │
├────────────────────────────────────┤
│ 🔴 Production Environment          │ ← Red status bar
└────────────────────────────────────┘

Staging Server (Orange):
┌────────────────────────────────────┐
│ ●●● VSCode [SSH: staging-01]      │ ← Orange title bar
├────────────────────────────────────┤
│                                    │
│  Your code here...                 │
│                                    │
├────────────────────────────────────┤
│ 🟠 Staging Environment             │ ← Orange status bar
└────────────────────────────────────┘

Development Server (Green):
┌────────────────────────────────────┐
│ ●●● VSCode [SSH: dev-server-01]   │ ← Green title bar
├────────────────────────────────────┤
│                                    │
│  Your code here...                 │
│                                    │
├────────────────────────────────────┤
│ 🟢 Development Environment         │ ← Green status bar
└────────────────────────────────────┘

How It Works

The extension detects SSH connections by checking for SSH environment variables (SSH_CONNECTION, SSH_CLIENT, SSH_TTY) and then matches the hostname against configured patterns to apply the appropriate colors.

Installation

From Source

1. Clone this repository
2. Run npm install to install dependencies
3. Run npm run compile to build the extension
4. Copy the entire folder to your VSCode extensions directory:
   • Windows: %USERPROFILE%\.vscode\extensions
   • macOS/Linux: ~/.vscode/extensions

Configuration

The extension comes with default configurations for production, staging, and development servers. You can customize these in your VSCode settings.

Default Configuration

{
  "serverid.enabled": true,
  "serverid.servers": [
    {
      "name": "production",
      "hostPattern": "prod|production",
      "titleBarColor": "#8B0000",
      "statusBarColor": "#8B0000"
    },
    {
      "name": "staging",
      "hostPattern": "stag|staging",
      "titleBarColor": "#CC6600",
      "statusBarColor": "#CC6600"
    },
    {
      "name": "development",
      "hostPattern": "dev|development",
      "titleBarColor": "#006400",
      "statusBarColor": "#006400"
    }
  ]
}

SSH Config File Support

You can also define colors directly in your SSH config file (~/.ssh/config):

Host virgo-server
    HostName 45.80.101.5
    User root
    IdentityFile ~/.ssh/id_rsa
    VSTitlebarColor #FF8800
    VSStatusbarColor #FF8800

Host production-server
    HostName prod.example.com
    User admin
    VSTitlebarColor #8B0000
    VSStatusbarColor #8B0000

The extension will prioritize SSH config colors over VSCode settings patterns. This allows you to:

• Keep server-specific colors alongside SSH connection settings
• Share color configurations with your team via version-controlled SSH configs
• Override default patterns with explicit host-based colors

Customization

To customize the server configurations:

1. Open VSCode Settings (File > Preferences > Settings or Ctrl+,)
2. Search for "Server ID"
3. Edit the serverid.servers array to add or modify server configurations

Configuration Options

• serverid.enabled: Enable or disable the extension (default: true)
• serverid.servers: Array of server configurations with the following properties:
  • name: Friendly name for the server
  • hostPattern: Regex pattern to match against the hostname
  • titleBarColor: Color for the title bar in hex format (e.g., #FF0000)
  • statusBarColor: Color for the status bar in hex format

Usage

1. Install and enable the extension
2. Connect to a remote server via SSH using VSCode's Remote-SSH extension
3. The extension will automatically detect the SSH connection and apply the appropriate colors based on your configuration
4. A notification will appear showing which server type was detected
5. Click the "🔄 Reload Colors" button in the status bar to manually refresh colors (useful after updating SSH config)

Manual Color Reload

After modifying your SSH config file or VSCode settings, you can reload colors:

• Click the "🔄 Reload Colors" button in the status bar
• Or use Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run "Server ID: Reload Colors"

Example Scenarios

Production Server

• Hostname matches pattern: prod|production
• Title bar and status bar: Dark Red (#8B0000)
• Helps you immediately recognize you're on a production server

Staging Server

• Hostname matches pattern: stag|staging
• Title bar and status bar: Dark Orange (#CC6600)
• Clear visual indicator for staging environments

Development Server

• Hostname matches pattern: dev|development
• Title bar and status bar: Dark Green (#006400)
• Safe environment indicator

Requirements

• Visual Studio Code 1.60.0 or higher
• SSH connection to remote server (detected via environment variables)

Development

Building

npm install
npm run compile

Watch Mode

npm run watch

Troubleshooting

Colors Not Changing

1. Ensure you're connected via SSH (check for SSH_CONNECTION environment variable)
2. Verify your hostname matches one of the configured patterns
3. Check the extension is enabled in settings
4. Look for extension logs in VSCode's Output panel (View > Output, select "Server ID")

Pattern Not Matching

• Test your regex pattern against your actual hostname
• Use case-insensitive patterns (the extension uses the i flag)
• Ensure the pattern is properly escaped in JSON

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.