ENV Autocomplete with Comments

A VS Code extension that supercharges .env file editing with smart autocomplete, value masking, unknown key highlighting, and group-sorted formatting.

✨ Features

1. 🚀 Smart Autocomplete

Type any key in a .env* file and get instant IntelliSense suggestions from a built-in dictionary of 39 common environment variables.

• Each suggestion shows its group, description, and default value in a detail popup.
• Selecting a key inserts a full snippet with a descriptive comment and a tab-stop placeholder:

# [AI & LLM Integration] Secret API credential key for authorizing calls to OpenAI's GPT and embedding model APIs.
OPENAI_API_KEY=sk-proj-example_openai_api_key_value

2. 🔒 Value Masking

Sensitive values are automatically masked with ••••• when you open a .env file — no accidental shoulder surfing.

Disable masking any time:

"envAutocomplete.maskValues": false

5. ✨ 자동 코멘트 삽입 (저장 시)

저장(Cmd+S)할 때 사전에 존재하는 키 중 코멘트가 없는 경우, VS Code가 팝업을 띄워 자동으로 코멘트를 추가할지 물어봅니다.

• 동작: 키가 사전(envAutocomplete.customKeys 혹은 내장 사전)에 있으면, 바로 위에 # [그룹] 설명 형태의 코멘트를 삽입합니다.
• 사용자 선택: 코멘트 추가 혹은 건너뛰기 버튼을 클릭합니다.
• 예시:

  # [Database] PostgreSQL connection string
  DATABASE_URL=postgresql://...
  # [Server] Port number the server listens on
  PORT=3000
  

이 기능은 앞에서 구현한 onDidSaveTextDocument 이벤트를 활용합니다.

Any key not found in the dictionary is highlighted with an orange border and a ⚠ Unknown key tag. A diagnostic warning appears in the Problems panel.

Press Ctrl+. / Cmd+. (or click the 💡 lightbulb) to open the "Add to Dictionary" form panel — all fields in one place:

After saving, the highlight disappears instantly and the key appears in autocomplete.

4. 📋 Format Document — Group Sorting

Run Format Document (Shift+Alt+F) to automatically sort all keys by group and add section header comments.

Before:

OPENAI_API_KEY=sk-...
PORT=3000
DATABASE_URL=postgresql://...
MY_CUSTOM_KEY=abc
NODE_ENV=development

After:

# ── Application Environment ────────────────────────────────────────
#
# Specifies the runtime environment (development, production, test) that controls compiler warnings and code optimization.
NODE_ENV=development
# The port number the web server binds to for handling incoming network traffic.
PORT=3000

# ── Database & Cache ────────────────────────────────────────────────
#
# Full connection string for the primary relational database, including engine, credentials, host, and database name.
DATABASE_URL=postgresql://...

# ── AI & LLM Integration ───────────────────────────────────────────
#
# Secret API credential key for authorizing calls to OpenAI's GPT and embedding model APIs.
OPENAI_API_KEY=sk-...

# ── Others ────────────────────────────────────────────────────────────
#
MY_CUSTOM_KEY=abc

Note: If a key already has a hand-written comment above it, the formatter preserves it and does not add a duplicate description comment.

🗂 Built-in Dictionary Groups

⚙️ Settings

Configure the extension in your settings.json:

Custom Key Example

"envAutocomplete.customKeys": {
  "MY_SERVICE_URL": {
    "value": "https://api.myservice.com",
    "description": "Internal microservice API gateway endpoint.",
    "group": "Custom"
  }
}

📄 Supported File Patterns

🛠 Development

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Run unit tests
npm test

# Package as .vsix
npm run package

Local Debugging

1. Open the project in VS Code.
2. Press F5 to launch the Extension Development Host.
3. Open any .env file in the new window to test all features.

📁 Project Structure

src/
├── extension.ts      # VS Code entry point — wires all features together
├── dictionary.ts     # Built-in dictionary of 39 environment variable keys
├── completion.ts     # Autocomplete logic (merge & snippet builder)
├── scanner.ts        # Static analyzer for process.env.KEY in source files
├── formatter.ts      # Format Document — group sorting & section headers
└── addKeyPanel.ts    # WebView panel form for adding unknown keys

tests/
├── completion.test.ts
└── scanner.test.ts

📄 License

MIT © 2024 myside