Visual Env for VSCode

Visual Env is a VSCode extension that helps developers visualize and manage environment variables within their projects. This extension makes it easy to see which environment variables are in use, edit their values through a user-friendly interface, and run environment-related CLI commands directly from your editor.

Features

Environment Variable Management

• View and edit environment variables in a structured, user-friendly interface
• Group variables by category for better organization
• Support for various data types (string, boolean, number) with appropriate input controls
• Filter and search capabilities to quickly find specific variables
• Real-time file watching with smart change detection
• Add, rename, and delete variables with instant feedback

Framework-Specific Support

• Laravel Projects: Automatic detection of Laravel projects with predefined variables
• Node.js Projects: Full support for Node.js/npm projects with common environment variables
• Django Projects: Support for Django projects with framework-specific configurations
• Generic Projects: Works with any project using .env files

Smart File Operations

• Create .env files from .env.example templates with a single click
• Automatic generation of secure random values for secret keys
• File change lock system to distinguish user vs extension modifications
• Support for multiple environment files (.env, .env.local, .env.production, etc.)

CLI Command Integration

• Execute environment-related CLI commands directly from VSCode
• Framework-specific command suggestions based on project type
• Command output displayed in dedicated VSCode output channel
• Laravel Artisan command support with parameter handling

User Experience

• Clean, VSCode-native UI that integrates seamlessly with your workflow
• Collapsible variable groups with +/- indicators
• Context menus for quick actions (copy, rename, delete)
• Debounced input updates to prevent excessive file writes
• Toast notifications for user feedback

Installation

From VSCode Marketplace

1. Open VSCode
2. Go to Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
3. Search for "Visual Env"
4. Click "Install"

Manual Installation

1. Download the latest .vsix file from the releases page
2. Open VSCode
3. Run command Extensions: Install from VSIX...
4. Select the downloaded file

Getting Started

1. Open your project in VSCode
2. Look for the "Visual Env" view in the Explorer sidebar
3. The extension will automatically detect your project type and load any existing environment variables
4. If no .env file exists but an .env.example is found, use the actions menu to create one

Usage

Viewing Environment Variables

• Environment variables are displayed in collapsible groups by category
• Use the file selector dropdown to switch between different .env files
• Click the +/- icons to expand or collapse variable groups
• Use the search field to filter variables by name

Editing Variables

• Click on any variable value to edit it inline
• Changes are automatically saved to your .env file after a short delay
• Special controls are provided for boolean variables and enumerated types
• Secret variables are masked for security

Adding Variables

• Click the "Add Variable" button to open the creation modal
• Fill in the variable name, value, group, and secret flag
• Variable names are automatically sanitized to follow environment variable conventions

Variable Actions

• Right-click on any variable to access the context menu
• Copy Variable Name: Copy the variable name to clipboard
• Rename Variable: Change the variable name while preserving the value
• Delete Variable: Remove the variable from the .env file

Actions Menu

• Click the gear icon (⚙️) to access the actions menu
• Refresh: Manually refresh the variable display
• Create Local File from Template: Create .env from .env.example (Laravel projects only)

Running CLI Commands

• Navigate to the "CLI Commands" tab to view available commands
• Click on a command button to execute it
• View command output in the "Visual Env - Command Output" panel
• Commands are tailored to your project type (Laravel Artisan, npm scripts, etc.)

Supported Frameworks

Laravel

• Automatic Laravel project detection
• Predefined environment variables with appropriate types
• Integrated Artisan commands for environment management
• Support for Laravel-specific .env file patterns

Node.js/npm

• Support for Node.js projects with common environment variables
• npm script integration for environment-related commands
• Automatic detection of Node.js project structure

Django

• Django project detection and support
• Framework-specific environment variable definitions
• Django management command integration

Generic

• Works with any project using standard .env files
• Configurable variable types and groupings
• Basic CLI command support

File Watching & Change Detection

The extension includes an intelligent file watching system that:

• Monitors all .env files in your workspace
• Distinguishes between user-initiated and extension-initiated changes
• Prevents duplicate UI refreshes while maintaining responsiveness
• Automatically updates the interface when files change externally

Requirements

• VSCode 1.74.0 or higher
• Project must use environment variables in standard .env file format
• Node.js runtime for CLI command execution (optional)

Extension Settings

This extension contributes the following settings:

• visualEnv.autoRefresh: Automatically refresh when .env files change (default: true)
• visualEnv.debounceDelay: Delay in milliseconds before saving changes (default: 500)
• visualEnv.showNotifications: Show success notifications for operations (default: false)

Known Issues

• File watching may not work properly on some network drives
• Large .env files (>1000 variables) may experience slower performance
• CLI commands require appropriate permissions and installed tools

Contributing

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

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

Development

To set up the development environment:

# Clone the repository
git clone https://github.com/ringlesoft/visual-env.git

# Install dependencies
npm install

# Open in VSCode
code .

# Press F5 to launch Extension Development Host

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Thanks to the VSCode team for their excellent extension API
• Implementation of IntelliJ Visual Env plugin by RingleSoft

Sponsorship

• Buy Me a Coffee: https://www.buymeacoffee.com/ringunger
• Github Sponsors: https://github.com/sponsors/ringlesoft

Support

If you encounter any issues or have feature requests:

• Report bugs
• Request features
• View documentation

Enjoy managing your environment variables with Visual Env! 🚀