How to Hide .env Secrets in VS Code -- The Complete Guide
Your .env file is the single most dangerous file in your project when your screen is being recorded or shared. This guide covers every method to hide those secrets in VS Code -- from built-in settings to dedicated extensions -- with honest comparisons of each approach.
Why .env Files Are the #1 Risk
The .env file is a convention that dates back to the Twelve-Factor App methodology. It stores environment-specific configuration -- database URLs, API keys, service tokens, and passwords -- in a simple key-value format. Every modern web framework uses it: Next.js, Rails, Django, Laravel, Express, and dozens more.
The problem is visibility. Unlike secrets stored in a vault or a CI/CD pipeline, .env files live in your project root, right alongside your source code. They are always one click away in your file explorer. And because developers frequently reference them during development, they are often the active tab when screen sharing begins.
DATABASE_URL=postgresql://admin:s3cr3t_p4ss@db.internal:5432/production
REDIS_URL=redis://:auth_token_789@cache.internal:6379
STRIPE_SECRET_KEY=sk_live_51H7bG2CjPnX9qK...
STRIPE_WEBHOOK_SECRET=whsec_abc123def456...
AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfi...
OPENAI_API_KEY=sk-proj-abcdef123456789...
SMTP_PASSWORD=email_p4ssw0rd_here
JWT_SECRET=super_secret_jwt_signing_key_2024
SENTRY_DSN=https://abc123@o123456.ingest.sentry.io/789
The Scale of the Problem
GitGuardian's 2024 report detected 12.8 million new secret leaks in public repositories alone. But video content is an underreported vector. A secret visible for even a single frame in a YouTube video can be extracted by automated OCR bots. And unlike a git commit that can be force-pushed away, a video viewed by 10,000 people cannot be unseen.
Method 1: VS Code's Built-In Settings
VS Code does not have a native "hide secrets" feature, but you can use its settings to reduce accidental exposure:
Exclude .env from File Explorer
Add this to your .vscode/settings.json to hide .env files from the sidebar:
"files.exclude": {
"**/.env": true,
"**/.env.local": true,
"**/.env.production": true
}
}
Limitation: This only hides files from the sidebar. If the file is already open in a tab, or if you open it via Cmd+P (Quick Open), the contents are fully visible. And it does nothing for secrets embedded in other file types like config.json or docker-compose.yml.
Use VS Code's Zen Mode
Zen Mode (Cmd+K Z) hides the sidebar, status bar, and activity bar. This reduces the surface area of accidental exposure but does not mask the actual content of open files. It is a cosmetic improvement, not a security measure.
Method 2: The .gitignore Approach
Every developer knows to add .env to .gitignore. This prevents the file from being committed to version control. However, .gitignore has zero impact on screen visibility. The file still exists on disk, still appears in your editor, and still shows its contents when you open it.
.gitignore is essential for preventing git-based leaks, but it does not help with screen recording or screen sharing scenarios.
Method 3: VS Code Extensions for Secret Masking
Several VS Code extensions specifically address secret visibility. Here is an honest evaluation of each:
Cloak replaces .env file values with asterisks in the editor view. It uses VS Code's Decoration API, so the actual file is unchanged.
- Pros: Simple, lightweight, works well for
.envfiles - Cons: Manual toggle only (you must remember to activate it). Only works with
.envfiles, not JSON, YAML, or TOML. No auto-detection of screen recording. No pattern matching -- hides all values, not just secrets.
Camouflage supports multiple file types and mask styles (stars, dots, custom text). More configurable than Cloak.
- Pros: Multi-file support (
.env,.json,.yaml,.toml). Multiple mask styles. Status bar toggle. - Cons: Still manual activation. Limited pattern matching. No recording detection. Cannot distinguish between sensitive and non-sensitive values in structured files.
DotENV provides syntax highlighting for .env files but does not mask values. It makes secrets more readable (and therefore more visible on screen). Useful for development, not for security.
- Pros: Excellent syntax highlighting, widely used (7M+ installs)
- Cons: No masking functionality at all. Actually makes secrets more visible by color-coding them.
PixelHush combines a macOS menu bar app with a VS Code extension. The menu bar app detects screen recording at the system level. The extension masks secrets automatically when recording is detected.
- Pros: Automatic activation (no manual toggle). 48 built-in secret patterns. 7 file types (
.env,.json,.yaml,.toml,.xml,.properties,.ini). Works with all screen recording apps. Chrome Extension for browser secrets. Also supports Cursor, Windsurf, and Antigravity. - Cons: macOS only. Requires a companion menu bar app. Pro features require a paid plan.
Extension Comparison Table
| Feature | Cloak | Camouflage | PixelHush |
|---|---|---|---|
| .env masking | Yes | Yes | Yes |
| JSON/YAML/TOML | No | Yes | Yes (7 types) |
| Auto-detect recording | No | No | Yes |
| Pattern matching | All values | Basic | 48 patterns |
| Browser extension | No | No | Chrome |
| Cursor support | No | No | Yes |
| Activation | Manual toggle | Manual toggle | Automatic |
| Price | Free | Free | Free / Pro from $5/mo or $49/yr |
Method 4: Project-Level Secret Management
Beyond editor extensions, consider these project-level practices that reduce secrets exposure regardless of your screen recording setup:
Use a Secret Manager
Services like Doppler, Infisical, HashiCorp Vault, or AWS Secrets Manager inject secrets at runtime rather than storing them in files. With this approach, your .env file contains references rather than actual values:
DATABASE_URL=${doppler://DATABASE_URL}
STRIPE_SECRET_KEY=${doppler://STRIPE_SECRET_KEY}
AWS_SECRET_ACCESS_KEY=${vault://aws/creds/my-role}
Tradeoff: More complex setup. Requires a running service for local development. Not practical for solo developers or small projects.
Use .env.example for Documentation
Maintain a .env.example file with dummy values that is safe to commit and show on screen. When you need to show environment configuration during a tutorial or call, show the example file instead of the real one:
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
STRIPE_SECRET_KEY=sk_test_your_test_key_here
AWS_ACCESS_KEY_ID=your_access_key_id
OPENAI_API_KEY=sk-your-key-here
Tradeoff: Requires discipline. Does not protect against accidentally opening the real .env file during a recording.
The Best Approach: Layered Defense
No single method provides complete protection. The most robust approach combines multiple layers:
- .gitignore prevents secrets from reaching version control
- PixelHush (or another masking extension) provides automatic visual protection during recordings and screen shares
- .env.example gives you a safe file to show when explaining configuration
- Secret rotation as a practice means that even if a secret leaks, the exposure window is limited
- Secret scanning in CI/CD (GitGuardian, GitHub secret scanning, TruffleHog) catches leaks that slip through other defenses
Secrets hide in more places than just .env. PixelHush scans .json (Firebase configs, package.json scripts), .yaml (Docker Compose, Kubernetes manifests, CI/CD configs), .toml (Cargo, pyproject), and more. The 48 built-in patterns catch secrets wherever they appear.
Quick Setup: PixelHush for VS Code
- Install the macOS app -- Download from pixelhush.dev. Drag to Applications. Grant Screen Recording permission.
- Install the VS Code extension -- Open Extensions panel (Cmd+Shift+X), search "PixelHush", click Install. The extension auto-connects to the menu bar app.
- Open any file with secrets -- Your
.env,config.json,docker-compose.yml, etc. Secrets are visible as normal during development. - Start any screen recording or screen share -- The moment OBS, QuickTime, Zoom, or any other app captures your screen, secrets are masked. When the capture stops, they reappear.
