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
- Clone this repository
- Run
npm install
to install dependencies
- Run
npm run compile
to build the extension
- 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:
- Open VSCode Settings (File > Preferences > Settings or
Ctrl+,
)
- Search for "Server ID"
- 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
- Install and enable the extension
- Connect to a remote server via SSH using VSCode's Remote-SSH extension
- The extension will automatically detect the SSH connection and apply the appropriate colors based on your configuration
- A notification will appear showing which server type was detected
- 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
- Ensure you're connected via SSH (check for
SSH_CONNECTION
environment variable)
- Verify your hostname matches one of the configured patterns
- Check the extension is enabled in settings
- 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.