Tired of switching between different .env files to check variable values? This plugin lets you effortlessly preview environment variable values directly within your VS Code editor. Hover over an environment variable in your code to see its value from different .env files.
✨ Features
⚡️ Instant Preview: Hover over an environment variable (e.g., process.env.API_KEY or import.meta.env.VITE_USER) to instantly see its value.
📄 Multi-File Support: Displays values from various .env files (e.g., .env, .env.development, .env.production) simultaneously.
🚀 Quick Actions:
Edit: Directly jump to the variable definition in the corresponding .env file.
Copy: Quickly copy the variable's value.
🏷️ Clear Identification: Easily distinguish between different environment configurations (e.g., development, staging, production).
🚀 Installation
Open Visual Studio Code.
Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).
Once installed, simply open a project with .env files and hover your mouse cursor over an environment variable in your code. A tooltip will appear showing the values from your configured .env files.
⚙️ Behavior & Configuration
Matching strategy: by default the extension follows a "last wins" strategy when the same key appears multiple times in a single .env file (later declarations override earlier ones). The internal helper also supports a first strategy for callers that need the first occurrence.
Debounce / batching: file watch events are debounced (250–300ms) and processed in batches to avoid heavy I/O when many file events occur in rapid succession (for example during git operations or bulk saves).
Security: hover values are displayed inside code blocks and can be masked; copy actions still provide the raw value for convenience. Values are escaped to avoid markdown codeblock injection.
