Project Overview
EnvShield is a Visual Studio Code extension designed to protect developers from accidentally revealing sensitive environment variables during live streams, screen shares, or recordings. It provides visual masking of values in .env files while maintaining full functionality for development work.
The extension was born from the real-world need of developers who stream their coding sessions or participate in video calls, where accidentally exposing API keys, database credentials, or other sensitive information could have serious security implications.
With EnvShield, developers can confidently share their screens knowing that their secrets are visually protected, while still being able to work with their environment variables normally.
Key Statistics
Technologies Used
Core Features
Visual Masking
Obscures environment variable values using customizable characters while keeping keys visible
Toggle Control
Enable or disable masking instantly via command palette or status bar item
Whitelist Support
Exempt specific keys like NODE_ENV from masking for better development experience
Smart Detection
Automatically works with .env, .env.local, .env.production, and other variants
Real-time Updates
Masks update dynamically as you type or edit your environment files
Status Bar Indicator
Clear visual feedback showing whether masking is currently active or disabled
Technical Implementation
Extension Architecture
Text Document Content Provider
Implements VS Code's TextDocumentContentProvider API to intercept and modify the display of .env files without changing the actual file contents.
Decoration API
Uses VS Code's text decoration API to apply visual overlays that mask sensitive values while preserving the underlying text for copying and editing.
Configuration Management
Leverages VS Code's configuration API to provide user-customizable settings for mask characters, whitelisted keys, and additional file patterns.
Key Components
Extension Activation
Activates when .env files are opened, registering commands and providers
Mask Engine
Core logic for parsing env files and applying masks to values
Status Bar Controller
Manages the status bar item showing current masking state
Configuration Handler
Handles user settings and applies them to the masking behavior
Example Configuration
{
"envShield.enabled": true,
"envShield.maskOnStartup": true,
"envShield.maskChar": "•",
"envShield.whitelistKeys": ["NODE_ENV", "PORT"],
"envShield.extraFileGlobs": [".env.*", "*.env"]
}User Experience Flow
Installation
User installs EnvShield from the VS Code marketplace or via the Extensions panel
Opening .env Files
When opening any .env file, EnvShield automatically activates and applies masking based on settings
Protected Viewing
Sensitive values are visually masked while keys remain visible for reference
Toggle Control
Users can toggle masking on/off using the status bar item or command palette when needed for debugging or development
Development Challenges & Solutions
Challenge: Preserving File Functionality
The extension needed to mask values visually without breaking copy/paste, search, or editing functionality.
Solution: Implemented visual-only masking using VS Code's decoration API, which overlays the mask without modifying the actual text content.
Challenge: Real-time Performance
Masking needed to update instantly as users type without causing lag or performance issues.
Solution: Used debouncing and efficient regex parsing to minimize computational overhead while maintaining responsive updates.
Challenge: File Pattern Detection
Supporting various .env file naming conventions while avoiding false positives.
Solution: Implemented configurable glob patterns with sensible defaults that cover common conventions while allowing users to add custom patterns.
Challenge: User Experience
Making the extension intuitive and non-intrusive while providing clear feedback about masking state.
Solution: Added a prominent status bar indicator and simple toggle commands, with clear visual differentiation between masked and unmasked states.
Try EnvShield Today
Protect your sensitive environment variables during streams and screen shares