如何编写VS Code扩展折叠JSX本地化包装器并显示内联摘要？

项目源码里有大量用于字符串本地化的JSX代码，原本简洁的<section>内容被嵌套在SomeCustomWrapper与AnotherWrapper中，示例代码如下：

<section>
  <SomeCustomWrapper props="X">
    <AnotherWrapper
      message="lorem impsum sit amet"
      description={{
        text: "description for lore impsum sit amet",
        someMoreProps: "X"
      }}
    />
  </SomeCustomWrapper>
</section>

希望编写一个VS Code插件，实现这些SomeCustomWrapper区域的折叠/展开功能，折叠后编辑器显示为：

<section>
  <string: "lorem impsum sit amet">
</section>

想了解VS Code API是否支持该功能及具体实现思路。

VS Code API完全支持这类自定义折叠与替换显示的需求，核心依赖文档符号（Document Symbols）、自定义折叠范围（Folding Ranges）和文本装饰器（Text Decorations），具体步骤如下：

• 步骤1：识别目标折叠范围
  借助@babel/parser这类工具解析JSX语法树，定位所有SomeCustomWrapper节点的起始（<SomeCustomWrapper ...>）和结束（</SomeCustomWrapper>）位置，同时遍历其子节点找到AnotherWrapper，提取message属性的字符串内容，作为折叠后的显示文本。

• 步骤2：注册自定义折叠范围
  通过vscode.languages.registerFoldingRangeProvider注册折叠范围提供者，返回自定义的FoldingRange对象，设置kind为vscode.FoldingRangeKind.Region，让VS Code识别这是可折叠区域。同时记录每个折叠范围对应的message值，供后续装饰器使用。

• 步骤3：实现折叠后的自定义显示
  使用vscode.window.createTextEditorDecorationType创建自定义装饰器，设置rangeBehavior为vscode.DecorationRangeBehavior.ClosedClosed以适配折叠区域。监听编辑器的onDidChangeVisibleRanges事件，当检测到目标折叠范围处于折叠状态时，在对应位置渲染自定义文本（如<string: "xxx">）。

• 步骤4：响应折叠/展开交互
  VS Code默认的折叠/展开快捷键（如Ctrl+Shift+[/Ctrl+Shift+]）会自动触发折叠状态变化，只需确保装饰器能实时响应这些状态更新即可。

• 关键注意事项

  • 优化AST解析性能：针对大文件，可仅解析可见区域代码，避免卡顿。
  • 处理嵌套场景：确保自定义折叠范围不与默认折叠逻辑冲突。
  • 兼容多样JSX写法：完善message属性提取逻辑，覆盖换行、动态属性等场景。

内容的提问来源于stack exchange，提问作者johncol