Environment Variable Viewer

🚀 The ultimate VS Code extension for managing environment variables with ease!

A powerful and intuitive VS Code extension that provides comprehensive support for viewing, searching, and copying environment variables from multiple .env file variants. Features both a tree view panel and quick pick interface for maximum developer productivity.

✨ Features

🔍 Multiple .env File Support

.env (default)
.env.local
.env.development
.env.production
.env.staging
.env.test
.env.example
Customizable file patterns via settings

🌳 Dual Interface

Tree View Panel: Persistent sidebar view with file organization
Quick Pick Interface: Fast search and selection with Ctrl+Shift+E

📋 Smart Copying Options

Copy variable key only
Copy variable value only
Copy full key=value pair
One-click copying from both interfaces

🔒 Security Features

Optional masking of sensitive values (passwords, secrets, keys, tokens)
Safe viewing without exposing sensitive data in tree view

⚡ Developer Experience

Real-time search with fuzzy matching
Auto-refresh when files change
Line number display for easy file navigation
Multi-workspace support
Keyboard shortcuts for quick access
Context menus for right-click actions

🎨 Customization

Configurable file patterns
Sortable variables (alphabetical, by file, or none)
Toggle line numbers display
Enable/disable auto-refresh
Sensitive value masking

☕ Like This Extension?

Support its development and keep it free for everyone:

🚀 Installation

From VS Code Marketplace

Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "Environment Variable Viewer"
Click Install
Open any project with .env files - you're ready!

First Use

Open a project with .env files
Look for "Environment Variables" in the Explorer sidebar
Or press Ctrl+Shift+E to open the quick picker
Click any variable to copy its value instantly
Right-click variables for more copy options

📚 How to Use

Method 1: Keyboard Shortcut

Press Ctrl+Shift+E (Windows/Linux) or Cmd+Shift+E (Mac)

Method 2: Command Palette

Press Ctrl+Shift+P
Type "View Environment Variables"

Method 3: Tree View Panel

Look for "Environment Variables" in the Explorer sidebar
Click to expand and navigate your variables

Right-click any .env file in Explorer
Select "View Environment Variables"

📖 Detailed Usage

Tree View Panel

The tree view provides a persistent, organized view of all your environment files:

File nodes show the filename and variable count
Variable nodes display key names and values (with optional line numbers)
Right-click context menu for copying options
Double-click variables to copy their values
Click file icon to open the source file

Quick Pick Interface

The quick pick offers fast searching and selection:

Type to search across all variables and values
Organized by file with clear separation
Multiple copy options for each variable
File navigation with quick open buttons

Search Functionality

Advanced search capabilities:

Global search: Ctrl+Shift+F when tree view is focused
Fuzzy matching across keys and values
Case-insensitive search
Real-time filtering as you type

⚙️ Configuration

Access settings via File > Preferences > Settings and search for "Environment Variable Viewer":

`envViewer.envFilePatterns`

Default: [".env", ".env.local", ".env.development", ".env.production", ".env.staging", ".env.test", ".env.example"]

Customize which files to scan for environment variables:

{
  "envViewer.envFilePatterns": [
    ".env",
    ".env.custom",
    "config.env"
  ]
}

`envViewer.showLineNumbers`

Default: true

Show line numbers in tree view and quick pick:

{
  "envViewer.showLineNumbers": false
}

`envViewer.maskSensitiveValues`

Default: false

Automatically mask values containing sensitive keywords:

{
  "envViewer.maskSensitiveValues": true
}

`envViewer.autoRefresh`

Default: true

Automatically refresh when .env files change:

{
  "envViewer.autoRefresh": false
}

`envViewer.sortVariables`

Default: "alphabetical"

Control variable sorting:

"none": Keep original file order
"alphabetical": Sort variables A-Z
"byFile": Group by file, then alphabetical

{
  "envViewer.sortVariables": "none"
}

🎯 Example .env Files

The extension handles various .env formats:

`.env`

# Database
DB_HOST=localhost
DB_PORT=5432
DB_NAME="my_app_db"

# API Configuration  
API_KEY=abc123xyz789
API_SECRET='very-secret-key'
BASE_URL=https://api.example.com

# Feature Flags
ENABLE_LOGGING=true
DEBUG_MODE=false

`.env.production`

# Production Database
DB_HOST=prod-db.example.com
DB_PORT=5432
DB_NAME=production_db

# Production API
API_KEY=prod_api_key_here
BASE_URL=https://api.production.com

🎯 Use Cases

Rapid Development

Quickly reference API keys during development
Copy database connection strings
Switch between environment configurations

Debugging

Verify environment variable values
Check configuration across different environments
Identify missing or incorrect variables

Team Collaboration

Share environment variable names without exposing values
Document required variables with .env.example
Ensure consistent configuration across team

DevOps & Deployment

Verify production configurations
Compare staging vs production variables
Quick access to deployment keys and secrets

🆘 Troubleshooting

No Environment Variables Found

Ensure you have .env files in your workspace root
Check envViewer.envFilePatterns setting
Verify file permissions

Variables Not Updating

Enable envViewer.autoRefresh in settings
Manually refresh with the refresh button
Check file watcher permissions

Tree View Not Showing

Make sure you have .env files in workspace
Restart VS Code if needed
Check VS Code developer console for errors

Extension Not Loading

Verify TypeScript compilation succeeded
Check for conflicting extensions
Review VS Code extension host logs

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit issues and enhancement requests.

Planned Features

Export variables to different formats
Variable validation and suggestions
Integration with cloud secret managers
Bulk editing capabilities
Environment variable diff view

📝 Changelog

Version 1.0.0

Initial release
Tree view panel support
Quick pick interface
Multiple .env file variants
Search functionality
Configurable settings
Security features

Made with ❤️ for developers who work with environment variables daily!

Note: This extension is designed for end users to install directly from the VS Code Marketplace. No building or compilation required!

☕ Support This Extension

If this extension has saved you time and improved your workflow, consider supporting its development:

Your support helps:

✨ Keep the extension free for everyone
🚀 Fund new features and improvements
🐛 Fix bugs and maintain compatibility
📚 Create better documentation

Thank you for using Environment Variable Viewer! 🙏

Environment Variable Viewer - Quick .env Manager

GingerTurtle