前端 JSON editor 工具调研功能要求 能力支撑： JSON 展示 JSON 编辑（希望能直接编辑代码） JSO

功能要求

能力支撑：

1. JSON 展示
2. JSON 编辑（希望能直接编辑代码）
3. JSON lint

case：

1. JSON 展示能保留数字的精度
   1. 提供内置工具，保留数字的精度
   2. 支持传入 JSON 字符串
2. 对嵌套引号能正常解析

特点：

1. 支持在 react 项目中使用

工具对比

json editor

Web 代码编辑器

pkg	功能是否满足	star(截止0704)	GitHub地址	官方示例
codemirror	满足	5.4k	github.com/codemirror/…	v5 在线：codemirror.net/5/demo/v6 介绍：codemirror.net/examples/
@uiw/react-codemirror(codemirror6 component for React)	满足	1.5k	github.com/uiwjs/react…	在线：uiwjs.github.io/react-codem…
ace	能力 3 配置较复杂	26.5k	github.com/ajaxorg/ace…	ace.c9.io/build/kitch…
react-ace	能力 3 配置较复杂	4k	github.com/securingsin…	在线：securingsincity.github.io/react-ace/
monaco-editorthe code editor that powers VS Code		39.1k	github.com/microsoft/m…
react-monaco-editor		3.7k	github.com/react-monac…	代码：github.com/react-monac…
@monaco-editor/react		3.5k	github.com/microsoft/m…	在线：microsoft.github.io/monaco-edit…

codemirror vs @uiw/react-codemirror

对于满足要求的工具，优缺点说明

1. codemirror

   1. 优点：文档完善、配置丰富

   2. 缺点：需要自行封装 React 组件

2. @uiw/react-codemirror

   1. 优点：@uiw/react-codemirror 基于 codemirror，提供 React 组件

   2. 缺点：暴露的配置并不完整（相对于 codemirror 来说）

工具选择与使用

综合功能和易用性考虑，尝试采用 @uiw/react-codemirror 作为 JSON editor 实现的依赖包。

@uiw/react-codemirror 使用示例

效果展示：

JSON lint 错误示例：

代码示例：

import { json, jsonParseLinter } from '@codemirror/lang-json'
import ReactCodeMirror from '@uiw/react-codemirror'
import beautify from 'js-beautify'
import { linter } from "@codemirror/lint"

const jsonString = '{"type":"team","test":{"testPage":"tools/testing/run-tests.htm","enabled":true},"search":{"excludeFolders":[".git","node_modules","tools/bin","tools/counts","tools/testing/chutzpah","server.net"]},"languages":{"vs.languages.typescript":{"validationSettings":[],"allowMultipleWorkers":true}}}'

export const ReactCodeMirrorDemo = (props) => {
  return (
    <ReactCodeMirror
      value={beautify(jsonString) || ''}
      width="100%"
      height='100%'
      minHeight='100px'
      maxHeight='400px'
      style={{
        overflow: 'auto'
      }}
      basicSetup={{
        tabSize: 4
      }}
      extensions={[json(), linter(jsonParseLinter(), { autoPanel: true })]}
      onChange={(value, viewUpdate) => {
        try {
          JSON.stringify(JSON.parse(value))
          console.log("value", value)
        } catch (error) {
          // 
        }
      }}
    />
  )
}

版本要求说明

• @codemirror/lint 版本 6.0.0 不支持 autoPanel 的配置，版本 6.8.1 支持
• @uiw/react-codemirror 版本 4.22.2 支持 basicSetup={{ tabSize: 4 }} 配置
• @codemirror/lang-json 版本 6.0.1，@lezer/common 版本 1.0.1 报错，需要将 @lezer/common 版本升级到 1.2.1

问题记录

不能通过简单配置满足的需求：

1. 希望 lint panel 放在头部

   1. 限制：codemirror 可以配置 top，@uiw/react-codemirror 不行

2. 希望能支持代码格式化 format

   1. @uiw/react-codemirror 并没有 API 支持（或者提供什么轻量的插件支持也行）
   2. 可以通过 JSON.stringify(JSON.parse(value), null, '\t') 实现（这样处理会丢失数字的精度，不满足 case1）
   3. 示例代码中通过引入 js-beautify 依赖包满足这个需求，但是 js-beautify 体积较大，引入成本过高

3. 希望在满足 JSON lint 的条件下处理一些逻辑

   1. 如果可以通过 @codemirror/lint 暴露的API 得到 JSON lint 是否通过，就可以用这个 API 做判断
      1. 查看 @codemirror/lint 源码，发现 diagnosticCount，但计算的值并不符合预期
   2. 示例代码中为了满足这个需求临时使用 try...catch... 包裹 JSON.stringify(JSON.parse(value))，目前还没找到更好的方案