Screen-Safe-Env: VS Code extension •

Screen-Safe-Env.

If you’ve ever live-streamed your coding sessions, shared your screen during a meeting, or recorded a tutorial, you know the anxiety of accidentally revealing your API keys or database passwords. Screen-Safe-Env is designed to solve exactly that problem.

What is Screen-Safe-Env?

Screen-Safe-Env helps developers protect sensitive data (like API keys, passwords, and tokens) in .env, JSON, and YAML config files by visually masking them in the editor. The underlying file content remains unchanged—only the display is altered.

Key Features

🔒 Visual Concealment: Automatically hides values in config files (e.g., API_KEY=*****).
📄 Multi-Format Support: Works with .env, JSON, and YAML config files.
🛡️ Zero Data Risk: Does not modify your files and does not store or transmit your secrets.
⚙️ Configurable Masking: Choose between solid blocks, length-preserving masks, or partial masking.
👁️ Toggle Control: Quickly toggle concealment on/off via command or status bar.
🖱️ Temporary Reveal: Peek at secrets by hovering (optional) or using the “Reveal Hold” command.
📝 Customizable: Configure which files to include and which keys to exclude (e.g., PORT, DEBUG).

Supported File Types

Type	Extensions	Example
Environment	`.env`, `.env.local`, `.env.*`	`API_KEY=secret`
JSON	`.json`	`"apiKey": "secret"`
YAML	`.yaml`, `.yml`	`apiKey: secret`

Usage

The extension activates automatically for .env files. For JSON and YAML files, you can add them to the include patterns in your settings.

Commands

Screen Safe Env: Toggle Hide/Show: Switch concealment on or off globally.
Screen Safe Env: Temporarily Reveal Values: Reveal values while the command is active (useful for keybindings).
Screen Safe Env: Force Rescan Current File: Manually trigger a scan if the file content changes externally.

Configuration

You can customize the extension in your VS Code settings.json. The extension supports both User Settings (global) and Workspace Settings (per-project).

Example Configuration

{
  "screenSafeEnv.enable": true,
  "screenSafeEnv.maskMode": "partial",
  "screenSafeEnv.include": ["**/.env*", "*.env", "**/config.json", "**/secrets.yaml"],
  "screenSafeEnv.excludeKeys": ["PORT", "DEBUG", "NODE_Env"],
  "screenSafeEnv.hoverReveal": false,
  "screenSafeEnv.revealHoldMs": 3000
}

Safety & Privacy

Visual Only: This extension uses VS Code’s decoration API to hide text. It does not encrypt your files.
No File Modifications: The extension never writes to, modifies, or edits any files. All masking is purely visual.
No Telemetry: This extension does not collect, store, or transmit any data whatsoever. Your secrets remain entirely on your machine.
No Network Requests: The extension operates completely offline with no external dependencies or API calls.
Open Source: All code is available for review on GitHub.

Get It Now

You can install Screen-Safe-Env directly from the VS Code Marketplace.

Give it a try and let me know what you think!