json schema如何约束为小数_JSON 文件在 VS Code 中可以可视化编辑了！

你使用过 VS Code 提供的 Markdown 预览功能吗？这个所见即所得的功能给我留下了深刻的印象，它大大地提高了我编写 Markdwon 文件的效率。

在前端领域，不同的框架提供了许多非常强大的配置化能力，这些配置大部分是基于 JSON 文件的。最开始，我们必须详细的阅读框架的使用文档，了解如何进行配置，我们需要仔细核对配置项目的名称以保证没有使用错误的选项。这样的操作无疑是痛苦的。

我们看到 VS Code 对一些 JSON 文件内置提供了代码补全和悬停信息的功能，例如tsconfig.json 和 package.json；我们还看到 VS Code Setting 的功能背后对应的就是更新 JSON 文件，是通过可视化配置表单操作 JSON 的一种源码可视化能力。

在 ICE 项目中进行应用配置时，我产生了一个想法：会不会有一种功能，它使得使用 JSON 文件即能提供自动补全功能，又能够像通过类似 VS Code Setting 方式去设置它？

于是我开发了一个 Iceworks 的插件，实现了这样的功能。

JSON 文件有哪些配置项一览无遗

这个插件可以让我们编辑类似 ICE 和 Rax 框架的应用配置时，快速了解到有哪些配置项可以进行设置。你有大量的配置可以进行选择，那么通过可视化界面，你可以迅速的了解这些配置背后的含义：

您可以通过点击 JSON 文件右上角的预览按钮唤起可视化配置表单；也可以在 JSON 文件中点击右键，在右键列表内点击「Iceworks：可视化设置 xxx.json」选项唤起它。

随时编辑表单实时同步 JSON 文件

仅仅用来展示文档是不够的，插件还提供了可视化编辑的能力，你可以通过打开的表单对配置内容进行修改，这些变化会立即同步到 JSON 文件中。同样的，在 JSON 文件中的变化也会同步到表单里：

优秀的代码补全能力

对于某些配置内容的高度复杂的情况，在表单中会出现层层嵌套的情况，通过表单反而会让配置的过程变得更糟糕。这种时候，在 JSON 中进行编辑是更合适的做法。在插件表单页面可以通过点击「在 xxx.json 中编辑」快速在 JSON 文件中补全相应的字段。当前插件对 ICE 和 Rax 应用提供了丰富的代码提示，帮助你迅速准确地进行编辑：

实现原理

可视化配置表单是基于 JSON Schema 生成的：

• 当你点击预览时，插件将尝试查找对应 JSON 文件的 Schema，如果能够找到，则根据该 Schema 生成可视化配置表单；
• 如果没有找到，则会尝试对当前 JSON 文件进行联想生成 Schema，再根据该 Schema 生成可视化配置表单。

前端的具体实现：

• 框架应用使用 icejs 实现；
• 配置化表单使用定制了 Fusion Design 主题的 React-Jsonschema-Form 组件生成；
• 框架应用负责维持表单的状态，并与 VS Code 插件进程双向通信，通知插件进程更新 JSON 文件或接受插件进程更新表单的指令。

内容实时同步：

插件使用了基于增量更新的双向通信方式，在更新的同时使用读写锁，解决了循环通知的问题。增量更新的模式相比于全量更新通信成本更少，并且能够更快响应使用者的动作，保证了插件的流畅性和表单与 JSON 文件内容的一致性。

欢迎使用

代码可视化是一次非常酷的尝试，Iceworks 大大提升了我编写 JSON 文件的体验和效率。在未来，我希望表单的配置化能力将变得更加强大，并且支持更多框架的配置。

如果你想使用它，可以在 VS Code 插件市场搜索 Iceworks，也可以点击以下链接进行安装：

Iceworks - Visual Studio Marketplace​marketplace.visualstudio.com

如果你希望你使用的框架能获得更好的表单配置化能力，也非常简单，只需要到 Iceworks 仓库下的 Schema 目录 提交 JSON Schema 文件即可。期待社区开发者来一起完善更多 JSON 文件的 Schema，让更多的框架和开发者受益！

Iceworks 以 MIT 的形式开源，开发者可以通过阅读源码进一步了解插件的实现原理，期待你的 star！

https://github.com/ice-lab/iceworks​github.com

Iceworks 是 ICE 开源产品的一部分，欢迎 star 以更好的关注项目动态：

https://github.com/alibaba/ice​github.com

文章封面由 Sam Moqadam 发布在 Unsplash