⚙️ ConfigAny - Visual Editor & Viewer for JSON, YAML, TOML, XML, INI & CONF
面向 VS Code 的全功能可视化配置编辑器与查看器 · All-in-One Visual Config Editor & Viewer for VS Code
把复杂的 JSON / JSONC / YAML / TOML / XML / INI / CONF 配置文件，变成点点鼠标就能直观浏览、编辑与校验的可视化界面。
Transform complex JSON, YAML, TOML, XML, INI & CONF files into an interactive, visual tree & form editor with instant search, schema validation, diff/merge, and format conversion.
🏠 官方网站 / Official Website | 🐛 问题反馈 / Issues | 🇨🇳 简体中文 | 🇺🇸 English
*
ConfigAny（扩展 ID：netproxy.vscode-config-any）是一款专为 VS Code 打造的全能可视化配置文件编辑器与查看器（Visual Config Editor & Viewer）。深度支持 JSON / JSONC / YAML / YML / TOML / XML / INI / CONF 八大格式，无需记忆繁琐语法，在交互式树形视图、动态表单与原始源码之间秒级切换。内置原生双向实时同步、完整撤销重做历史、JSON Schema 校验表单、可视化差异比对与合并（Visual Diff & Merge）及全格式一键无损互转（Format Converter）。
📚 目录 (Table of Contents)
🇨🇳 简体中文
🔍 核心能力与高频搜索速查 (Capabilities & Keyword Index)
无论你在寻找哪种配置处理工具，ConfigAny 均能一站式胜任：
| 适用格式与场景 |
常用搜索词 (Keywords) |
ConfigAny 核心能力与特性支持 |
| JSON & JSONC |
json editor, json viewer, jsonc, json schema, json formatter, json 转可视化 |
树形视图卡片展开、注释与尾随逗号保留、Schema 动态校验表单、颜色选择器、原生格式化美化 |
| YAML & YML |
yaml editor, yaml viewer, yml, yaml formatter, yaml 树状图 |
告别缩进层级错位与对齐报错、多层嵌套折叠卡片、特殊标点与多行文本自动安全转义 |
| TOML & INI / CONF |
toml editor, ini editor, conf, env file, properties, 配置管理 |
Section 分区快速定位导航，原生适配 pyproject.toml, Cargo.toml, .ini, .conf, .env |
| XML 数据可视化 |
xml editor, xml viewer, xml tree, xml attributes |
标签与属性（@_attr）结构化分层展示，杜绝漏闭合标签或语法报错 |
| 全格式无损互转 |
format converter, json to yaml, yaml to json, xml to json, toml to json |
面板内一键全格式无损互转（YAML ⇄ TOML ⇄ XML ⇄ JSON ⇄ INI），支持实时预览、导出与就地替换 |
| 差异对比与合并 |
diff, merge, visual diff, config compare, 配置比对 |
树形差异对比（新增绿/删除红/修改黄），支持单字段 Accept / Revert 与一键全量合并 |
| 超大文件性能模式 |
virtual scroll, large file, performance mode, 超大文件流畅 |
自动启用扁平化虚拟滚动，仅渲染可视视口节点，支持百万行级大配置 60fps 极速秒开与流畅编辑 |
✨ 为什么选择 ConfigAny？
还在为复杂的 JSON 或 YAML 层层嵌套、少写一个逗号而抓狂吗？ConfigAny 把配置文件从"一行行手敲"变成"可视化点击编辑"，让你像操作 Excel 一样管理配置：
| 痛点 😩 |
ConfigAny 的解法 ✅ |
| 嵌套层级太深，找不到要改的字段 |
树形视图 + 实时搜索，深层配置一键定位 |
| 手写 JSON/YAML 容易漏标点、格式报错 |
可视化编辑自动生成合法语法，杜绝低级错误 |
| 改了 UI 源码不同步，来回切换很痛苦 |
300ms 防抖双向同步，编辑即时写回源码 |
| 改错了想撤销，却怕弄乱历史记录 |
基于 vscode.WorkspaceEdit 的原生撤销/重做，完整保留 Ctrl+Z / Ctrl+Y |
| 大文件一打开就卡死 |
扁平化虚拟滚动，超大文件也流畅如丝 |
🚀 核心功能亮点
🆓 免费功能（Free Tier）
- 📄 多格式可视化编辑：JSON、YAML、XML、TOML、INI 配置文件，以直观的树形卡片与表单呈现。
- 🔄 原生双向实时同步：UI 与源码双向同步，带 300ms 防抖与
isInternalUpdate 锁机制，彻底消除编辑反馈死循环。
- ↩️ 原生撤销与重做：通过
vscode.WorkspaceEdit 提交，完美保留 VS Code 原生 Ctrl+Z / Ctrl+Y 历史栈。
- 🔍 搜索与高亮：快速检索深层配置项的键名与值，实时匹配高亮。
- 📂 小文件（<1MB）流畅交互：双击修改键名、字段增删、类型转换、单行/多行文本自由切换。
- 🖥️ 自适应折行工具栏：顶部工具栏跟随窗体宽度平滑动态折行，分屏与窄窗口下按钮 100% 完整可见，联动防遮挡。
- 🌐 多语言界面：自动适配 VS Code 语言，中英文一键实时切换。
💎 高级付费功能（Pro / Premium Tier）
- 📐 JSON Schema 动态驱动表单：自动关联 Schema 生成带校验的动态表单，支持枚举下拉（
enum）、颜色选择器（format: "color"）、正则校验（pattern）、范围限制（minimum / maximum）、必填标星与 Tooltip 说明。
- ⚡ 超大文件性能优化与虚拟滚动：自动检测大型配置/日志，仅渲染视口节点，支持在高性能模式下极速增删与修改节点，60fps 极速流畅滚动。
- 🔀 高级可视化差异对比（Visual Diff & Merge）：可视化树形对比当前配置与基准 / 剪贴板 / Git 版本（新增绿、删除红、修改黄），支持单字段 Accept / Revert 与一键合并。
- 🔄 全格式一键无损互转（Format Converter）：在面板内一键将数据无损互转 YAML / TOML / XML / JSON / INI，支持实时预览、导出与就地替换。
- 👑 Pro 正版授权与一键激活：支持 $4.99 USD 一机一码终身买断，支持 PayPal 在线秒级自动检测激活、云端历史授权恢复与激活码手动输入，永久免费更新。
📦 安装
方式一：VS Code 扩展市场（推荐）
- 打开 VS Code，进入 扩展 视图（Ctrl+Shift+X）。
- 搜索 ConfigAny 或 vscode-config-any。
- 点击 Install，安装完成后即自动注册。
方式二：命令行安装
code --install-extension netproxy.vscode-config-any
✅ 要求 VS Code ≥ 1.80.0，无任何外部运行时依赖。
🚦 快速上手
- 在资源管理器中打开任意 .json / .yaml / .toml / .xml / .ini / .conf 文件。
- 点击编辑器右上角的 “在可视化编辑器中打开” 图标，或执行命令 ConfigAny: Open in Visual Editor（Ctrl+Shift+P）。
- 在可视化面板中编辑配置，所有修改实时同步回源码文件。
- 需要时使用搜索、撤销/重做、格式互转或差异比对，一步到位。
📁 支持的文件格式
| 格式 |
扩展名 |
支持程度 |
| JSON / JSONC |
.json .jsonc |
✅ 完整支持 |
| YAML / YML |
.yaml .yml |
✅ 完整支持 |
| TOML |
.toml |
✅ 完整支持 |
| XML |
.xml |
✅ 完整支持 |
| INI / CONF |
.ini .conf |
✅ 完整支持 |
🆓 免费版 vs 💎 Pro 版
| 功能 |
免费版 |
Pro 版 |
| 多格式可视化编辑（JSON/YAML/TOML/XML/INI） |
✅ |
✅ |
| 原生双向实时同步 & 撤销/重做 |
✅ |
✅ |
| 搜索、字段增删、类型转换 |
✅ |
✅ |
| 多语言界面（中/英） |
✅ |
✅ |
| JSON Schema 动态表单 |
❌ |
✅ |
| 超大文件虚拟滚动与高性能编辑 |
❌ |
✅ |
| 可视化差异对比与合并 |
❌ |
✅ |
| 全格式一键无损互转 |
❌ |
✅ |
❓ 常见问题 (FAQ)
Q：ConfigAny 支持哪些配置文件？
A：支持 JSON / JSONC、YAML / YML、TOML、XML、INI、CONF 共八种格式。
Q：修改可视化内容后，源码文件会更新吗？
A：会。ConfigAny 提供 300ms 防抖的双向实时同步，修改立即写回源码，并完整保留原生撤销/重做历史。
Q：Pro 版如何购买与激活？
A：在编辑器内点击 Pro 徽章或工具栏功能，支持 $4.99 USD 终身买断。在线完成 PayPal 支付后，插件会自动实时检测并秒级激活，更换环境亦可随时点击“恢复授权”。
Q：打开超大文件会很卡吗？
A：不会。Pro 版会自动启用扁平化虚拟滚动，仅渲染视口节点，保证流畅交互。
Q：遇到 Bug 或有新功能建议如何反馈？
A：欢迎前往 Issues · netproxy/ConfigAny 提交反馈，我们会持续跟进与优化！
🗺️ 路线图 (Roadmap)
- [x] 多格式可视化编辑与双向同步
- [x] JSON Schema 动态表单（Pro）
- [x] Visual Diff & Merge（Pro）
- [x] 全格式无损互转（Pro）
- [x] 超大文件虚拟滚动性能模式增删与快速编辑（Pro）
- [ ] 更多 JSON Schema 组件（数组、嵌套对象模板）
- [ ] 配置模板库与常用配置一键生成
- [ ] 配置文件语法错误智能定位与修复建议
🤝 参与贡献
欢迎提交 Issues · netproxy/ConfigAny 与 PR！项目基于 TypeScript + React，核心代码位于 src/，Webview 前端位于 webview-ui/。开发调试：
npm install
npm run watch # 编译扩展 + Webview
📄 License
MIT License © 2026 ConfigAny
*
🇺🇸 English
🔍 Key Capabilities & Search Keywords
Whether you are looking for a standalone JSON viewer, YAML editor, or an all-in-one configuration workbench, ConfigAny delivers complete tooling:
| Category / Format |
High-Frequency Search Terms |
ConfigAny Core Capabilities & Features |
| JSON & JSONC |
json editor, json viewer, jsonc, json schema, json formatter, visual json |
Interactive tree view, comments & trailing commas preserved, schema forms, color picker, JSON prettifier |
| YAML & YML |
yaml editor, yaml viewer, yml, yaml formatter, yaml visualizer |
Eliminates whitespace and indentation headaches, collapsible nested cards, automatic safe escaping |
| TOML & INI / CONF |
toml editor, ini editor, conf, env file, properties, settings editor |
Clean section navigation, tailored for pyproject.toml, Cargo.toml, .ini, .conf project files |
| XML Visual Editor |
xml editor, xml viewer, xml tree, xml attributes |
Structured tags & attribute (@_attr) representation, eliminates missing closing tags or syntax faults |
| Lossless Converter |
format converter, json to yaml, yaml to json, xml to json, toml to json |
One-click lossless cross-conversion between YAML, TOML, XML, JSON, and INI with live preview & in-place apply |
| Visual Diff & Merge |
diff, merge, visual diff, config compare, file diff |
Tree-based color diffing (Added green, Deleted red, Modified yellow), single-field Accept/Revert & 1-click merge |
| Virtual Scroll |
virtual scroll, large file, performance mode, fast editor |
Intelligent virtual scrolling rendering only visible nodes, ensuring 60fps buttery-smooth editing on giant files |
✨ Why ConfigAny?
Tired of hunting through deeply nested JSON or chasing missing commas in YAML? ConfigAny turns configuration files from “hand-typing every line” into “point-and-click visual editing”, so you can manage config like a spreadsheet:
| Pain Point 😩 |
Solved by ConfigAny ✅ |
| Too many nested levels, can’t find the field |
Tree view + instant search, deep keys located in one click |
| Hand-writing JSON/YAML breaks on missing punctuation |
Visual editing generates valid syntax automatically |
| UI and source go out of sync |
300ms-debounced two-way sync, edits written back instantly |
| Afraid undo will mess up history |
Native undo/redo via vscode.WorkspaceEdit, preserving Ctrl+Z / Ctrl+Y |
| Large files freeze on open |
Flattened virtual scrolling, buttery-smooth even for huge files |
🚀 Key Features
🆓 Free Tier
- 📄 Multi-Format Visual Editor: Edit JSON, YAML, XML, TOML, and INI config files in an intuitive card/tree layout.
- 🔄 Native Two-Way Real-time Sync: Live sync between UI and source with 300ms debounce and update locks, eliminating feedback loops.
- ↩️ Native Undo / Redo: Integrated with
vscode.WorkspaceEdit, fully preserving VS Code’s Ctrl+Z / Ctrl+Y history stack.
- 🔍 Search & Highlight: Instantly search deep keys and values with real-time matching highlight.
- 📂 Smooth Editing (<1MB): Double-click rename, add/delete fields, convert types, switch between single-line/multi-line.
- 🖥️ Responsive Wrapping Toolbar: The toolbar smoothly wraps with window and split-pane resizing, ensuring all buttons remain fully visible with zero occlusion or horizontal clipping.
- 🌐 Multi-Language UI: Auto-detects VS Code language, one-click toggle between English 🇺🇸 and Chinese 🇨🇳.
💎 Pro / Premium Tier
- 📐 JSON Schema-Driven Forms: Auto-load schemas to build validated dynamic forms with Enum Dropdowns (
enum), Color Pickers (format: "color"), Regex Validation (pattern), Range Constraints (minimum/maximum), Required Asterisks, and Tooltip Docs.
- ⚡ Large-File Virtual Scroll & High-Performance Editing: Auto-detects big configs/logs, renders only visible viewport nodes, and supports ultra-fast adding/deleting/editing in performance mode at 60fps.
- 🔀 Visual Diff & Interactive Merge: Tree-based comparison against file, clipboard, or Git versions (Added green, Deleted red, Modified yellow) with per-field Accept / Revert and one-click merge.
- 🔄 One-Click Format Converter: Losslessly convert between YAML, TOML, XML, JSON, and INI with real-time preview, export, and in-place apply.
- 👑 Pro Licensing & Auto-Activation: $4.99 USD lifetime buyout per device with automatic real-time PayPal payment detection, cloud restore, manual key entry, and lifetime free updates.
📦 Installation
Option 1: VS Code Marketplace (recommended)
- Open VS Code → Extensions view (Ctrl+Shift+X).
- Search for ConfigAny or vscode-config-any.
- Click Install.
Option 2: CLI
code --install-extension netproxy.vscode-config-any
✅ Requires VS Code ≥ 1.80.0. No external runtime dependencies.
🚦 Quick Start
- Open any .json / .yaml / .toml / .xml / .ini / .conf file in the Explorer.
- Click the “Open in Visual Editor” icon in the editor title bar, or run ConfigAny: Open in Visual Editor via Ctrl+Shift+P.
- Edit in the visual panel — all changes sync back to source in real time.
- Use search, undo/redo, format conversion, or diff as needed.
| Format |
Extensions |
Support |
| JSON / JSONC |
.json .jsonc |
✅ Full |
| YAML / YML |
.yaml .yml |
✅ Full |
| TOML |
.toml |
✅ Full |
| XML |
.xml |
✅ Full |
| INI / CONF |
.ini .conf |
✅ Full |
🆓 Free vs 💎 Pro
| Feature |
Free |
Pro |
| Multi-format visual editing (JSON/YAML/TOML/XML/INI) |
✅ |
✅ |
| Native two-way sync & undo/redo |
✅ |
✅ |
| Search, add/remove fields, type conversion |
✅ |
✅ |
| Multi-language UI (EN/CN) |
✅ |
✅ |
| JSON Schema dynamic forms |
❌ |
✅ |
| Large-file virtual scroll & editing |
❌ |
✅ |
| Visual diff & merge |
❌ |
✅ |
| One-click lossless format conversion |
❌ |
✅ |
❓ FAQ
Q: Which config files does ConfigAny support?
A: JSON / JSONC, YAML / YML, TOML, XML, INI, and CONF — eight formats in total.
Q: Will my source file update when I edit visually?
A: Yes. ConfigAny writes changes back to source instantly via 300ms-debounced two-way sync, preserving native undo/redo.
Q: How do I buy and activate Pro?
A: Click the Pro badge or any premium feature to purchase a lifetime license for $4.99 USD. Once paid via PayPal, the editor automatically verifies and activates within seconds. You can also restore past purchases anytime with one click.
Q: Will huge files lag?
A: No. Pro enables flattened virtual scrolling that renders only visible nodes for smooth interaction.
Q: Where can I report bugs or suggest new features?
A: Please submit feedback or bug reports on Issues · netproxy/ConfigAny. We appreciate your input!
🗺️ Roadmap
- [x] Multi-format visual editing & two-way sync
- [x] JSON Schema dynamic forms (Pro)
- [x] Visual Diff & Merge (Pro)
- [x] Lossless format conversion (Pro)
- [x] Large-file virtual scroll node add/delete & rapid editing (Pro)
- [x] More JSON Schema widgets (arrays, nested templates)
- [x] Config template library & one-click generation
- [x] Smart syntax-error location & fix suggestions
🤝 Contributing
Bug reports, feature requests, and pull requests are welcome! If you encounter any problems or have suggestions, please submit an issue at Issues · netproxy/ConfigAny or create a PR.
This project is built with TypeScript + React, with core extension logic in src/ and Webview frontend in webview-ui/. Development & debugging:
npm install
npm run watch # Build Extension + Webview in watch mode
📄 License
MIT License © 2026 ConfigAny
| |
