json编辑器、json精灵汉化版下载 收藏 0

JSON英雄！开源智能JSON解析工具：JSON Hero

JSON Hero：一键解析，尽在掌握。 –精选真开源，释放新价值。

JSON Hero，一款由Trigger.dev团队精心开发的开源Web应用，专为简化JSON数据的浏览和分析而生。它通过一个直观且功能丰富的用户界面，使用户能够轻松地探索和操作JSON文件。无论是在数据结构的可视化呈现，还是在快速定位和编辑数据方面，JSON Hero都提供了前所未有的便捷体验。

这款工具的核心优势在于其多样化的视图选项，包括创新的列视图、传统的树视图以及直观的编辑器视图，每一种视图都旨在提升用户的工作效率。用户可以根据自己的需求和偏好，选择最合适的视图来浏览数据。此外，JSON Hero还具备强大的搜索功能，能够快速地在庞大的JSON文件中找到所需的键值对，极大地提高了数据处理的速度和准确性。

JSON Hero的另一大特色是其对数据内容的智能预览和推断能力。它能够自动识别字符串中的日期、时间、图像URL、网站链接等，并提供相应的预览和属性展示，使用户能够直观地理解数据的含义。这种智能的数据处理方式，不仅减少了用户在数据解析上的工作量，也使得数据的呈现更加生动和易于理解。

你可以在线体验：https://jsonhero.io

列视图

列视图是JSON Hero中的一项创新功能，它借鉴了macOS Finder的浏览方式，为用户提供了一种全新的数据探索体验。在这个视图中，用户可以通过键盘导航快速穿梭于JSON文档的不同层级，同时路径栏清晰地显示当前位置，方便用户定位和回溯。此外，列视图还具备历史记录功能，允许用户轻松地在不同的浏览历史之间切换，提高了数据检索的灵活性。

编辑器视图

编辑器视图提供了一个全屏的编辑环境，允许用户对整个JSON文档进行查看和编辑。与传统的文本编辑器不同，JSON Hero的编辑器视图在侧边栏中保留了数据预览和相关值的功能，使得用户在编辑的同时，能够即时获取到数据的上下文信息和结构概览，从而提高编辑的准确性和效率。

树视图

树视图是JSON Hero中的传统浏览模式，它以树状结构展示JSON文档，支持节点的展开和折叠，使用户能够根据需要深入或隐藏文档的不同部分。这个视图还提供了键盘快捷方式，使得用户可以快速地在文档的不同节点间跳转，提高了数据导航的速度。

搜索功能

JSON Hero的搜索功能非常强大，它允许用户通过一个简单的搜索面板，对整个JSON文件进行快速的模糊搜索。无论是键名、键路径、值，还是格式化后的值，搜索功能都能在毫秒级别内返回结果，极大地提升了用户在处理大型JSON文件时的搜索效率。

内容预览

内容预览是JSON Hero的一项智能功能，它能够自动推断并展示字符串中的内容，如日期、时间、图像URL、网站链接等，并提供相应的预览和属性信息。这种直观的展示方式，不仅帮助用户快速理解数据的含义，也使得数据的呈现更加生动和易于分析。

相关值

相关值功能使用户能够一键查看整个JSON文档中与特定字段相关的所有值，包括那些可能被忽略的undefined或null值。这项功能对于数据清洗、验证和分析尤为重要，因为它能够帮助用户全面地掌握数据的分布情况，从而做出更准确的决策。

截至发稿概况如下：

• 软件地址：https://github.com/triggerdotdev/jsonhero-web
• 软件协议：Apache-2.0 license
• 编程语言：

• 收藏数量：9.1K

JSON Hero以其强大的功能和直观的界面，为用户提供了一种高效的方式来处理和分析JSON数据。尽管如此，像所有软件工具一样，它也可能遇到一些挑战。例如，随着数据量的增加，性能优化可能成为用户关注的焦点。为了解决这一问题，开发者可以持续监控应用的性能指标，并针对性地优化算法和数据结构，以确保即使在处理大型JSON文件时也能保持流畅的用户体验。

此外，不同用户可能对界面的个性化需求有所不同。为了满足这些需求，JSON Hero可以提供更多的自定义选项，允许用户根据自己的偏好调整界面布局和功能设置。这样的灵活性不仅能够提升用户的满意度，也能够吸引更广泛的用户群体。

声明：本文为辣码甄源原创，转载请标注\”辣码甄源原创首发\”并附带原文链接。

推荐几个开发必备的JSON工具

众所周知，JSON让开发人员易于使用，又让机器易于解析和生成。

JSON吸引了工具构建者的注意，它们开发了用于重新格式化、验证和解析JSON的众多工具，这不足为奇。这些工具既有在Web浏览器中运行的在线实用程序，又有面向代码编辑器和IDE的插件，比如Visual Studio Code和Eclipse。

下面介绍了其中九款工具。

JSONLint

来自CircleCell的JSONLint是一款面向JSON的在线验证和重新格式化工具。开发人员可以将JSON粘贴或输入到编辑器中，或者输入URL。JSONLint可以验证“混乱”的JSON代码，还可以解析。如果用户将?reformat=compress添加到URL，JSONLint还可以用作JSON压缩工具。

何处可以访问JSONLint?

可以在网问JSONLint(https://jsonlint.com/)。该工具的源代码可以在GitHub上找到(https://github.com/circlecell/jsonlint.com)。

JSONCompare

JSONLint的高级版本JSONCompare可以直接验证JSON代码。它可以同时上传和验证多个批处理JSON文件，比较和合并两个JSON对象。JSONCompare有简单模式、批处理模式和差异模式。与JSONLint一样，JSONCompare也由CircleCell开发。

何处可以访问JSONCompare?

可以在网上找到JSONCompare(https://jsoncompare.com/)。源代码可以在GitHub上找到(https://github.com/circlecell/jsoncompare.com)。

jtc

Jtc的全称是“JSON测试控制台”，这个CLI工具用于提取、处理和转换源JSON。开发人员可以使用jtc从源JSON选择一个或多个元素，立即对这些元素执行操作，比如将选定的元素包装到新的JSON中、过滤进出或更新元素。用户界面允许使用单个命令进行大量更改。Linux和MacOS编译二进制文件可供下载。

何处可以下载JTC?

可以从GitHub下载jtc(https://github.com/ldn-softdev/jtc#compile-and-install-instructions)。

ijson

ijson最初于2016年开发，是一款拥有标准Python迭代器界面的迭代JSON解析工具。最常见的用途是让ijson从前缀以下的JSON流生成原生Python对象。ijson提供实际解析的几种实现：基于C的YAJL(另一种JSON库)或Python后端。

何处可以下载ijson?

可以从PyPI下载ijson(https://pypi.org/project/ijson/#files)。

JSON格式化和验证器

JSON格式化和验证器这款在线工具旨在对JSON进行格式化和美化，以便更易于阅读和调试。由于JSON的输出不用换行(以节省空间)，因此可能难以阅读和理解。使用这款在线格式化工具的开发人员只需粘贴JSON或URL。JSON格式化和验证器书签可用于格式化和验证公共JSON URL。

何处可以访问JSON格式化和验证器?

可以在网问JSON格式化和验证器(https://jsonformatter.curiousconcept.com/)。

Altova XMLSpy JSON和 XML编辑器

Altova XMLSpy是一款JSON和XML编辑工具，提供了用于编辑、建模、转换和调试XML相关技术的各种工具。主要的工具包括图形化模式设计器、代码生成工具、文件转换器、调试器以及用于处理XSLT、XSD、XBRL和SOAP的分析器。XMLSpy利用RaptorXML Server进行JSON验证和处理。

何处可以下载Altova XMLSpy?

可以从Altova网站下载Altova XMLSpy的免费试用版(https://www.altova.com/xmlspy-xml-editor/download)。

Code Beautify JSON工具

Code Beautify JSON工具包括JSON查看器、JSON编辑器、JSON验证器以及JSON到HTML、JSON到XML和JSON到YAML等转换器。还提供了Excel到JSON转换器和JSON 缩小器。Code Beautify还为XML、HTML、CSV、CSS、RSS、SQL、Base64及其他数据格式和文件类型提供了在线脚本编辑器、美化器、缩小器和转换器。

何处可以访问Code Beautify JSON工具?

可以在网问Code Beautify JSON工具(https://codebeautify.org/json-tools)。

Visual Studio Code

微软这款流行的代码编辑器内置了支持编辑JSON文件的功能。这包括通过IntelliSense针对属性和值进行验证、快速导航、代码折叠和建议。将鼠标悬停在JSON数据的属性和值上方时，会提供另外的上下文。VS Code将使用关联的JSON模式以了解JSON文件的结构。

何处可以下载Visual Studio Code?

可以从项目网站下载Visual Studio Code(https://code.visualstudio.com/Download)。

Eclipse JSON编辑器插件

面向Eclipse IDE的免费JSON编辑器插件包括自定义语法高亮、代码折叠、格式化和编辑等功能，提供了同步树视图。还提供语法树解析。Eclipse JSON编辑器插件符合RFC 4627 JSON标准。

何处可以下载Eclipse JSON编辑器插件?

可以从Eclipse Marketplace下载Eclipse JSON编辑器插件(https://marketplace.eclipse.org/content/json-editor-plugin)。

基于JSON Schema的前端可视化活动编辑器

演示地址：https://form.lljj.me/vue-editor.html#/editor

项目地址：https://github.com/lljj-x/vue-json-schema-form/

基于 JSON Schema 开箱即用的简单活动可视化编辑器。

在做生成一个可视化店铺装修系统的时候，需要解决配置数据表单的通用性，参阅了一些现用的解决方案，最终通过 JSON Schema 来生成对应的表单和校验规则。

参考资料：

https://github.com/CntChen/cntchen.github.io/issues/15

JSON Schema 主要运用在如下几点：

• 基于 JSON Schema 来动态生成数据配置表单和数据校验
• 结合发布流程同步 JSON Schema 到后端系统做接口数据校验
• 活动版块对应一个 JSON Schema 和一份视图 View组件 即可

首先可视化编辑器需要做到板块的管理，这些板块支持可视化的编辑配置和效果展示，最终相互组装为一个页面。

每个板块我们不可避免的需要一个 View组件 来做展示，因为每个板块都长得不一样。板块配置表单和数据校验都通过 JSON Schema 来实现，然后再通过一个拖动的容器来承载这些板块以及一些其它的数据配置。

这样当我们在添加新的板块时，只需要开发一个 View组件 ，和书写一份 JSON Schema 来定义数据即可。

基于Vue，依赖 ElementUi、vuedraggable、@lljj/vue-json-schema-form

• 板块支持配置化
• 支持可添加数，是否可删除，置顶，置底，图标配置
• 支持拖动或者点击上下移动，复制删除等调整页面布局
• 支持页面预览模式
• 支持编辑还原数据和默认板块数据配置
• 视图组件支持异步加载
• 不支持嵌套组件
• …

添加新的板块只需要在 config/tools.js 导入新增的板块，并且配置好工具栏即可，如：

新增板块文件结构如下：( viewComponents/FlashSaleGoodsList/index.js 这里对应上面工具栏配置导入的组件包文件)

导出模块解释如下：

• propsSchema： required JSON Schema配置，必须包含一个 id 的属性，并且要保证唯一，在保存和编辑数据时用来标识当前组件。传递给 vue-json-schema-form 生成表单；
• componentViewName： required 板块View组件名，唯一，建议通过 id + View 拼接，只是为了在注册组件时的组件名，其实我也可以帮你生成，但是我没有；
• View： required required 板块View组件，需要异步导入就 () => import(‘./xxx.vue’)，View 组件必须包含一个名为 formData 的props接受当前表单数据；
• uiSchema：传递给 vue-json-schema-form 生成表单，用于增强生成表单的样式，可选；
• errorSchema：传递给 vue-json-schema-form 生成表单，用于增强表单的校验提示信息
• customRule：传递给 vue-json-schema-form 生成表单，用于自定义校验表单数据

如果需要更多 vue-json-schema-form 参数可直接在

packages/demo/src/vue-editor/views/editor/Editor.vue

渲染 VueElementForm 组件时添加即可。

• 新增板块可参见 /packages/demo/src/vue-editor/views/editor/viewComponents 内现有板块
• 工具栏和默认数据配/packages/demo/src/vue-editor/views/editor/config 文件夹内

整个实现相对比较简单，感兴趣的可以花上两个小时看下源码，欢迎讨论提问。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com