Env Shield: Your Secret Guardian in VS Code

Crhistopher Suriel — Tue, 25 Mar 2025 23:00:00 +0000

Introduction

As developers, we know how crucial it is to protect sensitive information during collaborative work. That's why I created Env Shield, a small VS Code extension designed to protect sensitive information from accidental exposure. Whether you're sharing your screen during pair programming sessions, recording tutorials, or taking screenshots, Env Shield ensures your secrets stay secret by automatically blurring sensitive content in your configuration files.

Key Features

1. Automatic Secret Detection

Hide sensitive content in .env files and other configuration files by blurring the value of your secret keys.
Recognizes common patterns for API keys, passwords, tokens, and other credentials from given configuration files.

2. Smart File Recognition

Built-in support for .env files and their variants (.env.local, .env.development, etc.)
It is configured to protect additional file types (JSON, YAML, etc.).
Customizable file patterns to match your project's structure

3. Dynamic Blur Control

Toggle blur on/off with a simple click
Status bar indicator shows current protection status
Automatic reactivation when switching files or windows

Getting Started

Installation

From the editor:

Open VS Code
Access the Extensions Marketplace
Search for "Env Shield"
Click Install

From the marketplace:

Visit the Visual Studio Code Marketplace
Click the "Install" button

Basic Configuration

The extension works out of the box with default settings, but you can customize it through VS Code settings:

{
  "env-shield.additionalFiles": ["config.json", "secrets.yaml"],
  "env-shield.sensitiveFiles": ["**/credentials/*"],
}

Usage Scenarios

Pair Programming

Env Shield automatically blurs sensitive values in your .env files while keeping the key names visible when sharing your screen during pair programming sessions. This allows you to discuss configuration without exposing actual credentials.

Documentation and Tutorials

Creating documentation or tutorials? Env Shield helps you capture clean screenshots without accidentally including sensitive information. The blur toggle feature lets you quickly switch between protected and visible states.

Tips

Quick Toggle: Use the status bar indicator to toggle blur protection on/off when needed quickly.
File Patterns: Configure additional file patterns to protect sensitive files across your project:

{
  "env-shield.additionalFiles": [
    "config/*.json",
    "**/secrets/*",
    "deployment/credentials.yaml"
  ]
}

Conclusion

Env Shield is an essential tool for modern development workflows where security and privacy are paramount. It automatically protects sensitive information while maintaining productivity, providing peace of mind during collaborative development activities.

Remember: The best security breach is the one that never happens. With Env Shield, you're one step closer to ensuring your secrets remain secret.

DEV Community: Crhistopher Suriel