更新记录

1.0.0（2026-10-01） 下载此版本

第一次发布基本功能

平台兼容性

# JSON 配置面板

一个 HBuilderX 自定义编辑器插件，为 package.json 和其他 .json 文件提供可视化编辑能力。

功能特性

package.json 专属视图

• 表单视图：常用字段（name、version、description、author、license、private）以表单形式编辑，带灰色提示说明
• scripts 列表：脚本名和命令成对编辑，支持增删改
• 入口文件配置：main、module、browser 三个入口字段，main 默认自动补全为 index.js
• 字段自动补全：打开和保存时自动补全缺失的基础字段，空字符串字段用默认值填充
• 树状视图：完整 JSON 结构树，支持折叠展开、增删改、key 重命名
• 源码视图：全屏可编辑的 JSON 文本，实时双向同步

通用 JSON 视图

• 树状视图：递归渲染完整 JSON 结构，节点可折叠，key 和 value 均可编辑
• 源码视图：全屏可编辑的 JSON 文本，实时双向同步
• 智能识别：value 输入 {} 或 [] 后，回车或失焦自动渲染成树状子节点

通用能力

• 主题适配：自动跟随 HBuilderX 当前主题（绿柔 / 酷黑 / 雅蓝），支持运行时实时切换
• 保存机制：完全交给 HBuilderX 管理，Ctrl+S 保存后标签卡星号自动消失
• 失焦保存：输入框失焦时自动保存
• 快捷键：Ctrl+S（Windows/Linux）或 Cmd+S（Mac）保存

安装

方式一：插件市场（推荐）

在 HBuilderX 中打开插件市场，搜索「JSON 配置面板」安装。

方式二：离线安装

1. 下载插件压缩包
2. 解压到 HBuilderX 安装目录下的 plugins 文件夹
3. 重启 HBuilderX

使用

安装后，在 HBuilderX 中打开任意 .json 文件即可自动启用：

• package.json：默认显示表单视图，顶部选项卡可切换到树状或源码
• 其他 .json：默认显示树状视图，顶部选项卡可切换到源码

表单视图（package.json）

1. 修改任意字段，输入框失焦后自动保存
2. scripts 区域点击「+ 添加脚本」新增脚本项
3. 入口文件配置中，main 留空会自动补 index.js

树状视图

• 点击节点前的箭头折叠 / 展开子节点
• 点击 key 可重命名（数组索引不可改）
• 点击 value 输入框可直接编辑
• 悬停节点显示 +（添加子项）和 ×（删除）按钮
• 在叶子节点输入 {} 或 []，回车或失焦后自动转为可折叠的树节点

源码视图

• 全屏编辑，直接修改 JSON 文本
• 失焦时解析，解析成功同步到表单 / 树状视图，失败弹窗提示
• 支持 Ctrl+S 保存

开发

环境要求

• HBuilderX 2.9.2 及以上（自定义编辑器最低版本）

目录结构

插件目录/
├── package.json    # 插件清单
├── extension.js    # 插件主逻辑
└── README.md

核心机制

• 自定义编辑器：通过 contributes.customEditors 声明 viewType 为 npmConfigEditor，匹配 *.json
• 主题获取：调用 HBuilderX 官方 API hx.workspace.getConfiguration() 读取 editor.colorScheme，映射到具体颜色值
• 主题切换：监听 hx.workspace.onDidChangeConfiguration，变化时通过 webView.postMessage 通知 WebView 更新 CSS 变量
• 保存流程：WebView 发消息触发 hx.commands.executeCommand("workbench.action.files.save")，由 HBuilderX 调用 saveCustomDocument 完成落盘并清除脏状态

调试

1. 在 HBuilderX 中打开插件项目
2. 按 Ctrl+R 启动调试，会弹出新窗口
3. 在新窗口中打开 .json 文件测试
4. 修改代码后需停止运行并重新 Ctrl+R（package.json 不热更新）

已知限制

• 仅支持根节点为对象或数组的 JSON，纯值类型（如 123、"str"）无法可视化编辑
• 源码视图解析失败时不会自动修复，需手动改正 JSON 语法
• 主题切换的响应依赖 HBuilderX 的配置变更事件，极端情况下可能有短暂延迟

许可证

MIT