Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Env EaseNew to Visual Studio Code? Get it now.
Env Ease

Env Ease

zhubin

|
4 installs
| (0) | Free
A VS Code extension for managing .env files with visual interface
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Env Ease - VS Code 环境变量管理插件

一个专业的 VS Code 插件,用于可视化管理 .env 文件中的环境变量配置。

功能特性

🎯 智能检测

  • 自动检测 .env 文件或以 .env 开头的文件
  • 通过特定触发行 # @env-manage-panel-enabled 激活插件
  • 支持多环境配置文件(如 .env.development、.env.production 等)

📊 可视化管理

  • 直观的 Webview 界面展示所有环境变量
  • 按键(key)自动分组显示
  • 清晰区分当前激活值和备选值
  • 专业的 UI 设计,符合 VS Code 主题

⚡ 便捷操作

  • 单选按钮快速切换不同的环境变量值
  • 一键注释某个键的所有值
  • 右上角快速查看原始文件
  • 实时更新文件内容

🔧 智能解析

  • 解析所有键值对行(包括注释行)
  • 自动识别激活状态(未注释的行)
  • 支持复杂的环境变量配置

使用方法

1. 准备 .env 文件

在你的 .env 文件顶部添加触发行:

# @env-manage-panel-enabled

# 你的环境变量配置
VUE_APP_BASE_URL=https://api.production.com
# VUE_APP_BASE_URL=https://api.staging.com
# VUE_APP_BASE_URL=http://localhost:3000

DB_HOST=prod-db.example.com
# DB_HOST=localhost

2. 打开文件

当你打开包含触发行的 .env 文件时,插件会自动激活并显示管理面板。

3. 管理环境变量

  • 切换值:点击单选按钮选择不同的环境变量值
  • 注释所有值:点击"注释所有值"按钮将某个键的所有值都注释掉
  • 查看原文件:点击右上角"查看原始文件"按钮

界面说明

主要区域

  1. 标题栏:显示当前文件名和"查看原始文件"按钮
  2. 环境变量组:按键分组显示的环境变量
  3. 选项列表:每个键的所有可能值,当前激活的值会高亮显示
  4. 操作按钮:注释所有值的快捷操作

视觉指示

  • 高亮背景:当前激活的环境变量值
  • 单选按钮:选中状态表示当前激活
  • 等宽字体:环境变量值使用 Courier New 字体便于阅读

开发和构建

安装依赖

yarn install

编译

yarn compile

监听模式

yarn watch

技术实现

核心技术

  • TypeScript:类型安全的开发体验
  • VS Code Extension API:原生扩展开发
  • Lodash:高效的数据处理
  • Webview API:现代化的用户界面

主要模块

  1. 文件检测模块:监听文档打开事件,检测 .env 文件
  2. 解析模块:解析环境变量,按键分组
  3. Webview 模块:创建和管理用户界面
  4. 文件操作模块:更新 .env 文件内容

数据结构

interface EnvEntry {
  key: string;           // 环境变量键
  value: string;         // 环境变量值
  isActive: boolean;     // 是否为激活状态
  lineNumber: number;    // 行号
  originalLine: string;  // 原始行内容
}

interface GroupedEnvEntry {
  key: string;           // 环境变量键
  entries: EnvEntry[];   // 该键的所有条目
  activeEntry?: EnvEntry; // 当前激活的条目
}

示例配置

查看 .env.example 文件了解完整的配置示例。

注意事项

  1. 确保 .env 文件包含触发行 # @env-manage-panel-enabled
  2. 环境变量格式应为 KEY=VALUE
  3. 注释行以 # 开头
  4. 插件会自动保存文件更改

许可证

MIT License

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft