I Built My First VS Code Extension(EnvGuard)
A few weeks ago, I noticed a problem that almost every developer faces sooner or later: configuration drift.
You add a new environment variable to your local .env file, everything works perfectly, and then deployment fails because the same variable is missing from .env.production or .env.example.
After dealing with this issue multiple times, I decided to build a solution.
Today, I'm excited to share (EnvGuard), my first published VS Code extension.
🎥 Video Tutorial
I've created a step-by-step tutorial showing how to install and use EnvGuard.
If you prefer watching rather than reading, the video covers everything from installation to comparing environment files.
What Is EnvGuard?
EnvGuard is a framework-agnostic environment file manager designed for developers working with:
- Laravel
- Node.js
- React
- Spring Boot
- .NET
- And many other frameworks
Its goal is simple:
Help developers detect missing configuration keys before they become production problems.**
The Problem
Imagine this situation:
.env
APP_NAME=MyApp
STRIPE_SECRET=xxxx
MAIL_HOST=smtp.example.com
.env.production
APP_NAME=MyApp
MAIL_HOST=smtp.example.com
The STRIPE_SECRET key is missing.
Everything works locally, but production crashes when payment functionality is used.This type of issue is surprisingly common in development teams.EnvGuard helps catch these problems before deployment.
Key Features
🔍 Smart Environment File Discovery
EnvGuard automatically scans your workspace and finds configuration files such as:
.env.env.local.env.production.env.testapplication.propertiesapplication.ymlapplication.yaml
It intelligently skips folders like:
- node_modules
- vendor
- build directories
- virtual environments
to keep scans fast.
⚖️ Side-by-Side Comparison
Compare two configuration files instantly.
EnvGuard highlights:
- Missing keys
- Extra keys
- Different values
This makes it easy to identify inconsistencies across environments.
🚨 Missing Key Detection
One of my favorite features.
EnvGuard audits environment files and immediately warns you when keys exist in one file but are missing from another.
This helps prevent deployment failures caused by forgotten configuration updates.
📊 Export Reports
Need to share issues with your team?
EnvGuard can export audit results into a JSON report for easy collaboration.
🎯 Click-to-Navigate
When EnvGuard detects an issue, simply click the item.
VS Code will automatically jump to the exact file and line number where the problem exists.
No manual searching required.
Privacy First
Since environment files often contain sensitive information, security was a top priority.
EnvGuard:
✅ Processes everything locally
✅ Makes zero external network requests
✅ Collects no telemetry
✅ Requires no account
Your secrets never leave your machine.
How To Get Started
- Install EnvGuard from the VS Code Marketplace.
- Open the EnvGuard sidebar.
- Scan your workspace.
- Compare environment files.
- Review missing keys and inconsistencies.
- Fix issues before they reach production.
Lessons Learned Building My First Extension
Building EnvGuard taught me a lot:
- VS Code extension architecture
- Workspace file scanning
- Configuration parsing
- Publishing to the marketplace
- Developer-focused UX design
The biggest lesson was that building the extension is only half the job.
The other half is documentation, tutorials, feedback, and continuous improvement.
What's Next?
I'm actively working on improvements and new features.
Some ideas include:
- Enhanced comparison views
- Better reporting
- Additional configuration formats
- Team collaboration improvements
If you have suggestions, I'd love to hear them.
Try EnvGuard
If you're a developer who works with multiple environments, give EnvGuard a try.
Feedback, feature requests, and bug reports are always welcome.
Thanks for reading and supporting my first developer tool project!
Happy coding.
