Envy — Visual .env Editor

A visual editor for .env files that understands what is inside the values: JSON objects and arrays, lists, numbers, booleans and 0/1 flags, and shows the comments that document them.

The file stays plain text. Every change is a small edit to the original lines, so quotes, spacing, comments and blank lines are kept, git diffs stay minimal, and VS Code's undo, redo and save work as usual.

Features

Readable overview

• Every entry is shown as KEY = value on one line, with its comments underneath. Long values fade out at the end; hovering shows the full value.
• Banner comments such as # ---- Database ---- become section headings.
• Each value gets a type label: string, number, boolean, 0/1, list, JSON object, JSON array, invalid JSON.
• Search filters keys, values and comments and highlights the matches. Results stay under their section headings, and searching for a heading shows its whole section.
• The toolbar stays at the top: search, sort, mask, open as text and add entry. A small floating toolbar at the bottom has undo and redo; Ctrl+Z, Ctrl+Y and Ctrl+S work as usual.

Editing by type

Click an entry to edit it. The entry opens above a dimmed overlay; Add comment shows the comment fields when the entry has none yet. Press Enter or click outside to apply the change, or press Escape to cancel. Click a key to rename it. Changes go into the open document like normal typing: they can be undone, and the file is written only when you save.

JSON edits change only the edited part of the value, and single-line JSON stays on one line in the file. Repeated values in lists are allowed but marked.

For JSON values, one button cycles through the grid, tree and raw JSON views, and another opens the editor full screen for large values. In the grid, the header row and the key column stay visible while scrolling. The key line of the edited entry stays at the top while you scroll through its editor.

Text fields edit the value as the application reads it: quotes typed around a value become part of the value, and the editor says so. Quotes in the file are added automatically when a value needs them.

Managing entries

• Add, rename, delete, copy, and comment out / re-enable entries (# KEY=value).
• When adding an entry, paste a whole KEY=value line into the key prompt to skip typing the value separately.
• Edit the comment above an entry and the inline comment after it.
• Sort entries A–Z within each section; commented-out entries go last.
• Duplicate keys are flagged: dotenv uses the first definition.
• Unclosed quotes and text after a closing quote are flagged. Like dotenv, such a line is read as unquoted text, quotes included.
• Secret-looking values (*TOKEN*, *SECRET*, *PASSWORD*, *_KEY, …, but not *PUBLIC*) are masked by default; one toggle shows them. Editing or copying a masked value uses the real value.

Keyboard

Layered files

Frameworks load several .env files on top of each other. With layering enabled, the editor shows:

• Inherited values from lower-priority files, with one-click "override in this file" and "open source file".
• overrides .env on entries that replace a value from a lower file.
• overridden by .env.local on entries that have no effect because a higher file wins.
• The layer chain, where each existing file can be opened with a click.

Supported load orders:

The mode (development, production, test, or dev/prod/test for Symfony) can be switched in the editor; the choice is remembered per workspace without changing settings.

Privacy and security

Everything stays on your machine. .env files often hold secrets, so the extension is built to keep them local:

• No network access. The extension makes no network requests and has no telemetry, analytics or accounts. The editor view runs with a Content Security Policy that blocks all network access (default-src 'none') and loads only the extension's own bundled scripts, styles and icons.
• Only the files it needs. It reads the open file and, when layering is enabled, the other .env files of the configured load order in the same folder. With the auto preset it also reads the nearest package.json / composer.json to detect the framework. Nothing else is read.
• No hidden writes. Changes go into the open document through VS Code, like typing. The file is written only when you save, and every change can be undone.
• Clipboard only on request. A value is copied only when you click Copy value.
• Secrets masked on screen. Secret-looking values are hidden in the editor by default. This only affects the display; the file is unchanged.

The source repository is not public yet; a public repository will be added later. Until then, the shipped code is not minified, so you can review it: a .vsix is a zip file, and the extension's code is in extension/dist/.

Getting started

1. Open a .env, .env.* or *.env file.
2. Click Open in Envy Visual Editor in the editor title bar, or right-click the file in the Explorer.
3. Use Open as Text in the title bar or the editor's toolbar to switch back.

To always open .env files visually, run View: Reopen Editor With… and choose Configure default editor for '.env'….

Settings

Example for a Next.js project (.vscode/settings.json):

{
  "envy.layering.enabled": true,
  "envy.layering.preset": "next"
}

Supported syntax

• KEY=value, export KEY=value, spaces around =
• Unquoted, "double", 'single' and `backtick` quoted values, including values spanning multiple lines
• Escape sequences \n and \r in double quotes
• Comments above entries, inline comments after values, # inside quoted values
• CRLF and LF line endings

Known limitations

• ${VAR} references are shown as written, not resolved.
• Environment variables set outside the files are not considered for layering.
• A comment like # WORD=… is treated as a commented-out entry.
• Symfony's .env.dist fallback is not part of the Symfony preset.

Development

npm install
npm run build      # bundle extension and webview into dist/
npm run watch      # rebuild on changes
npm test           # unit tests (vitest)
npm run typecheck
npm run format     # prettier
npm run package    # create a .vsix with vsce
npm run publish    # publish to the Marketplace (after `npx vsce login rolandtoth`)

Use Run Extension in the Run and Debug view to start an Extension Development Host with the sample/ folder.