[RFC] launch.json 调试配置 UI 化

[Ricbet]

背景

当前在 opensumi 内开启项目 debug 调试都是采用 launch.json 配置文件的方式，这种方式虽具备高度的强定制化以及可复制性（同个配置复制粘贴到多个项目），但也存在以下几个问题

• 配置项不直观，需要 hover 上去才能看到配置项的描述
• 不知道有哪些内置的环境变量，如 ${workspaceRoot}
• 多种不同类型的调试配置都混杂在一起
• 对新人不友好

目前 setting.json 已经有一个体验很好的设置面板了，为什么 launch.json 不可以呢？而且不同语言的调试插件所提供的配置项都是可以枚举的。

在这样的背景下，我们希望提供一个 GUI 的界面来管理项目的调试配置，使得更直观更易于使用。

同时也支持与 launch.json 配置文件的模式进行切换，来兼容已有的调试逻辑

解决方案

受 codesandbox 启发，他们很好的将自己的 config.json 配置以 GUI 的方式呈现出来，同时也支持 json 文件的切换

为了支持这一方案，我们需要考虑以下几个问题

• 关于入口
  • 从已有的 launch.json 文件点击打开
  • 没有 launch.json 文件的从调试面板的 welcome 界面引导
  • 命令面板打开
• 关于 UI
  • 参考现有的设置界面去设计（或有新想法的欢迎补充）
    • 或支持 provider ？
  • 主题色适配
• 关于兼容
  • 如何关联已有的配置项
  • 模式如何切换
• 关于体验
  • 从其他 json 文件复制一段配置如何快速粘贴到 GUI 界面上？

功能清单

（待补充）

影响范围

1. 不影响现有的 debug 启动逻辑
2. 不影响 debug 相关的所有 api

实现复杂度

四颗星

[Ricbet]

UI 主要分两部分

• 左侧: 不同配置项的 label，也就是 launch.json 文件里的 configurations 列表
• 右侧: 该 label 下的具体的调试配置项，以 UI 的形式展示

左侧

按钮可以以 button 组件的方式显示在最下方

点击后展示 launch json 的 snippet 列表

添加完成后显示在左侧顶部区域

右侧

右侧区域的 UI 就比较复杂了，因为不同语言的调试配置项参数是不一样的，类型也是不一样，比如会出现对象嵌套对象的情况。

但通过研究发现这些配置项的内容都是符合 JSON schema 的，所以我们可以采用 https://rjsf-team.github.io/react-jsonschema-form/ 这个库来实现对配置项的编辑

第一期可以先实现以下 checklist

• 基础 UI 实现
• 空配置项情况下的处理
• 支持添加配置项
• 接入 react-jsonschema-form 库，实现基本的配置项参数设置
• UI 与 launch.json 同步