ENV Pettier

A VSCode extension that turns your .env files into a clean, searchable viewer — and gives you inline hints whenever your code accesses an environment variable.

Overview

Main extension view

Open any workspace with .env files and run ENV Pettier: Open Viewer from the Command Palette to get a beautiful panel showing all your environment variables, grouped by source file.

Features

Search bar

The search bar filters keys and values in real time across all .env files in your workspace.

Add Variables

Add button

Use the + button to add a new environment variable directly from the panel.

Adding a key-value pair

Type the key and value in the inline form — it gets written straight to the file on disk.

Edit Variables

Modifying a value

Click any value to edit it inline. Changes are saved directly to the .env file.

Delete Variables

Deleting an env var

Hit the Remove button on any variable to delete the line from the file on disk.

Sensitive Value Protection

Passwords, tokens, secrets, and API keys are automatically blurred.

Hidden sensitive value

Click the eye icon to reveal the value when you need it.

Unhidden sensitive value

Inline Code Decorations

When writing code that reads env variables, the extension annotates each access inline:

JavaScript	Python
Ruby	Shell

Situation	Decoration
Variable found in `.env`	`= VALUE` shown in italic after the call
Variable missing, default in code	`⚠ missing (default: X)` in amber
Variable missing, no default	`⚠ missing` with red dashed border

Hover Tooltips

Hover over any env access to see:

The resolved value (from your .env files)
The source file and line number
Any comment above the variable in the .env file
The default value defined in the code (if any)

Supported Languages

Language	Patterns detected
Python	`os.environ.get()`, `os.environ[]`, `os.getenv()`
JavaScript / TypeScript	`process.env.VAR`, `process.env['VAR']`
Ruby	`ENV['VAR']`, `ENV.fetch()`
Go	`os.Getenv()`, `os.LookupEnv()`
Rust	`std::env::var()`, `env!()`
Shell	`$VAR`, `${VAR:-default}`
PHP	`$_ENV[]`, `getenv()`, `env()`
Java	`System.getenv()`

Supported `.env` File Names

.env, .env.local, .env.development, .env.production, .env.staging, .env.test, .env.example, .env.sample, .env.template, example.env, sample.env, *.env

Commands

Command	Description
`ENV Pettier: Open Viewer`	Open the webview panel
`ENV Pettier: Refresh`	Re-scan workspace for env files

Right-clicking a .env file in the Explorer also shows ENV Pettier: Open Viewer in the context menu.

Settings

Setting	Default	Description
`envPettier.showInlineHints`	`true`	Show inline decorations in code files

Getting Started

Open a workspace that contains .env files
Run ENV Pettier: Open Viewer from the Command Palette (Ctrl+Shift+P)
The panel opens beside your editor and auto-refreshes whenever .env files change

Development

git clone <repo>
cd env_pettier
npm install
npm run watch   # or F5 in VSCode to launch Extension Host

License

MIT

ENV Pettier

layem-software

ENV Pettier

Overview

Features