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. 管理环境变量
- 切换值：点击单选按钮选择不同的环境变量值
- 注释所有值：点击"注释所有值"按钮将某个键的所有值都注释掉
- 查看原文件：点击右上角"查看原始文件"按钮
界面说明
主要区域
- 标题栏：显示当前文件名和"查看原始文件"按钮
- 环境变量组：按键分组显示的环境变量
- 选项列表：每个键的所有可能值，当前激活的值会高亮显示
- 操作按钮：注释所有值的快捷操作
视觉指示
- 高亮背景：当前激活的环境变量值
- 单选按钮：选中状态表示当前激活
- 等宽字体：环境变量值使用 Courier New 字体便于阅读
开发和构建
安装依赖
yarn install
编译
yarn compile
监听模式
yarn watch
技术实现
核心技术
- TypeScript：类型安全的开发体验
- VS Code Extension API：原生扩展开发
- Lodash：高效的数据处理
- Webview API：现代化的用户界面
主要模块
- 文件检测模块：监听文档打开事件，检测
.env 文件
- 解析模块：解析环境变量，按键分组
- Webview 模块：创建和管理用户界面
- 文件操作模块：更新
.env 文件内容
数据结构
interface EnvEntry {
key: string; // 环境变量键
value: string; // 环境变量值
isActive: boolean; // 是否为激活状态
lineNumber: number; // 行号
originalLine: string; // 原始行内容
}
interface GroupedEnvEntry {
key: string; // 环境变量键
entries: EnvEntry[]; // 该键的所有条目
activeEntry?: EnvEntry; // 当前激活的条目
}
示例配置
查看 .env.example 文件了解完整的配置示例。
注意事项
- 确保
.env 文件包含触发行 # @env-manage-panel-enabled
- 环境变量格式应为
KEY=VALUE
- 注释行以
# 开头
- 插件会自动保存文件更改
许可证
MIT License
| |
