.ENV File Viewer - Environment Variable Manager

🎯 Why You Need This Extension

Are you tired of:

• ❌ Opening multiple .env files to find one variable?
• ❌ Copying environment variables manually and making mistakes?
• ❌ Not knowing if your PORT or URL values are valid?
• ❌ Switching between development and production configs?

This extension solves all of that! ✨

🚀 Quick Start

1. Install the extension from VS Code Marketplace
2. Open any project with .env files
3. Look for "Environment Variables" in your Explorer sidebar
4. Done! Start viewing and managing your environment variables

Or press Ctrl+Alt+E (Mac: Cmd+Alt+E) to open the quick picker!

✨ Key Features

🔍 Smart .env File Detection

Automatically finds and loads ALL your environment files:

• ✅ .env (main)
• ✅ .env.local (local overrides)
• ✅ .env.development (dev environment)
• ✅ .env.production (production)
• ✅ .env.test (testing)
• ✅ .env.staging (staging)
• ✅ .env.example (template)
• ✅ Custom patterns via settings

Perfect for: React, Next.js, Vue, Angular, Node.js, Docker, and any framework using .env files!

📋 Instant Copy & Paste

Copy environment variables with one click:

• 🔑 Copy Key - Just the variable name (e.g., API_KEY)
• 📝 Copy Value - Just the value (e.g., abc123xyz)
• 📦 Copy Both - Full pair (e.g., API_KEY=abc123xyz)

Use case: Need to paste an API key into Postman? One click. Done. ✅

📤 Export to Any Format (v1.1.0)

Export your environment variables to:

• JSON - For API documentation
• YAML - For Kubernetes/Docker configs
• CSV - For spreadsheets and analysis
• .env - Create backups or share templates

Use case: Share your .env structure with your team (without exposing real values!)

✅ Automatic Validation (v1.1.0)

Catch configuration errors before they break production:

• ⚠️ Invalid ports - "8080abc" is not a valid port!
• ⚠️ Malformed URLs - Missing http:// or https://
• ⚠️ Empty secrets - Your API_KEY shouldn't be blank!
• ⚠️ Placeholder values - "your-api-key-here" needs to be replaced
• ⚠️ Wrong booleans - Use "true" or "false", not "yes" or "no"

Visual warnings with yellow icons and tooltips - fix issues in seconds!

🌳 Dual Interface

Choose how you work:

1. Tree View Panel (Sidebar)

• See all .env files organized in one place
• Expand/collapse files
• Hover to see full values
• Right-click for copy options

2. Quick Pick Interface (Keyboard)

• Press Ctrl+Alt+E to open
• Type to search instantly
• Select and copy in one action
• Perfect for keyboard warriors ⌨️

🔒 Security First

• Sensitive Value Masking - Automatically hides passwords, secrets, API keys, and tokens
• Masked by default - Enabled out of the box (can be disabled)
• Screenshot safe - Safe to share screens during meetings
• No data sent - Everything runs locally in VS Code

🔎 Powerful Search

Find variables instantly:

• Search across all .env files at once
• Fuzzy matching - typos don't matter
• Search both keys and values
• Case-insensitive
• Press Ctrl+Alt+F when tree view is focused

Example: Type "port" to find PORT, DATABASE_PORT, REDIS_PORT, etc.

🎬 See It In Action

Tree View:

📁 .env (5 variables)
  🔑 PORT = 3000
  🔑 DATABASE_URL = postgres://...
  ⚠️ API_KEY = (empty) ← validation warning!

📁 .env.production (8 variables)
  🔑 NODE_ENV = production
  🔑 API_URL = https://api.example.com
  ...

🎯 Perfect For

📖 Complete Feature List

Core Features

• ✅ Multi-file support - All .env variants automatically detected
• ✅ Tree view panel - Organized sidebar in Explorer
• ✅ Quick pick interface - Keyboard-driven search and select
• ✅ Smart copying - Key, value, or both with one click
• ✅ Line numbers - Jump to exact location in file
• ✅ Auto-refresh - Updates when .env files change
• ✅ Context menus - Right-click anywhere for actions
• ✅ Multi-workspace - Works with VS Code workspaces

Advanced Features (v1.1.0)

• ✅ Export to JSON/YAML/CSV/.env - Share or backup configs
• ✅ Variable validation - Catch errors before they break production
• ✅ Validation warnings view - See all issues at a glance
• ✅ Visual indicators - Warning icons for invalid variables
• ✅ Quick fix navigation - Click warning → jump to file location

Security & Privacy

• ✅ Sensitive value masking - Hide passwords, secrets, keys, tokens
• ✅ Masked by default - Secure out of the box
• ✅ Tooltip masking - Masked values stay masked everywhere
• ✅ No telemetry - Your data never leaves your machine
• ✅ Path validation - Protection against malicious workspace settings

⚙️ Configuration

Customize the extension to fit your workflow:

Settings

{
  // Which files to scan (default: common .env variants)
  "envViewer.envFilePatterns": [
    ".env",
    ".env.local",
    ".env.development",
    ".env.production"
  ],

  // Show line numbers in tree view and quick pick
  "envViewer.showLineNumbers": true,

  // Automatically mask sensitive values (RECOMMENDED)
  "envViewer.maskSensitiveValues": true,

  // Auto-refresh when .env files change
  "envViewer.autoRefresh": true,

  // How to sort variables
  "envViewer.sortVariables": "alphabetical" // or "none", "byFile"
}

Keyboard Shortcuts

Tip: Customize shortcuts via File > Preferences > Keyboard Shortcuts

💡 Usage Examples

Example 1: Copy API Key to Postman

1. Press Ctrl+Alt+E
2. Type "api"
3. Click your API_KEY
4. Value copied! Paste into Postman ✅

Example 2: Export Config for Docker

1. Click the 📤 Export button in tree view
2. Select "YAML" format
3. Save as docker-config.yaml
4. Use in your Dockerfile or docker-compose.yml ✅

Example 3: Find All Port Configurations

1. Click 🔍 Search in tree view
2. Type "port"
3. See all PORT variables across all .env files
4. Jump to any file with one click ✅

Example 4: Validate Before Deployment

1. Click ⚠️ Validation Warnings button
2. See all configuration errors
3. Click any warning to jump to file
4. Fix issues and deploy confidently ✅

🤔 FAQ

🆚 Why Choose This Over Other Extensions?

📊 Supported Frameworks

Works perfectly with any framework that uses .env files:

• ⚛️ React (Create React App, Vite)
• ▲ Next.js (All versions)
• 💚 Vue.js (Vue CLI, Vite, Nuxt)
• 🅰️ Angular
• 🔷 Svelte (SvelteKit)
• 🟢 Node.js (Express, Fastify, NestJS)
• 🐍 Python (Django, Flask with python-dotenv)
• 🐹 Go (godotenv)
• 🦀 Rust (dotenv)
• 🐳 Docker / Docker Compose
• ☸️ Kubernetes (via export to YAML)

🐛 Troubleshooting

Extension not showing up?

• Make sure you have at least one .env file in your workspace root
• Check that the file is named correctly (.env, not env.txt)
• Restart VS Code if needed

Variables not updating?

• Make sure envViewer.autoRefresh is enabled in settings
• Click the 🔄 Refresh button in the tree view
• Save your .env file to trigger refresh

Can't find a specific file type?

• Add your custom pattern to envViewer.envFilePatterns in settings
• Example: ".env.custom", "config.env"

🛣️ Roadmap

Version 1.2.0 (Coming Soon)

• [ ] Bulk editing (rename/update multiple variables)
• [ ] Encryption support for sensitive values
• [ ] Environment diff view (compare .env files)
• [ ] Variable templates and presets

Version 1.3.0

• [ ] Cloud secret manager integration (AWS, Azure, GCP)
• [ ] Team collaboration features
• [ ] Variable dependency tracking
• [ ] Auto-completion in .env files

Vote for features: GitHub Issues

☕ Support Development

This extension is 100% free and will always be. If it saves you time and you want to support 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! 🙏

📝 Changelog

See CHANGELOG.md for detailed release notes.

Latest (v1.1.0)

• ✨ NEW: Export to JSON, YAML, CSV, .env
• ✨ NEW: Variable validation with warnings
• 🔒 SECURITY: Fixed path traversal vulnerability
• 🔒 SECURITY: Fixed masking bypass issues
• 🐛 FIXED: All resource leaks and race conditions
• ⬆️ UPDATED: TypeScript 5.3, 0 npm vulnerabilities

🤝 Contributing

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

MIT License - see LICENSE file for details.

🌟 Show Your Support

If this extension helps you, please:

• ⭐ Star the GitHub repository
• ✍️ Leave a review on the VS Code Marketplace
• 🐦 Share with your developer friends
• 💬 Join the discussion on GitHub