Regex RR插件支持VSCode正则可视化编辑：一、安装插件并重启；二、用Cmd+Shift+P启用内联面板；三、通过命令打开独立编辑器调试匹配；四、导出SVG结构图用于协作。
如果您在使用 VSCode 编辑正则表达式时难以理解匹配逻辑或频繁调试失败，可能是由于缺乏对模式结构与捕获组行为的直观感知。以下是针对 VSCode 中 Regex RR 插件实现正则表达式可视化编辑的多种操作方式：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Regex RR 插件
Regex RR 是一个专为 VSCode 设计的轻量级正则表达式可视化工具，它将文本匹配过程实时渲染为可交互的图形节点，帮助用户识别分组嵌套、量词作用域及回溯路径。
1、打开 VSCode，点击左侧活动栏中的扩展图标（四个方块组成的图标）。
2、在扩展搜索框中输入 Regex RR。
3、在搜索结果中找到作者为 rokoroku 的插件，点击“安装”按钮。
4、安装完成后，重启 VSCode 以激活插件功能。
二、启用内联可视化面板
该功能在编辑器右侧直接显示当前正则表达式的结构图与实时匹配高亮，无需切换窗口即可观察表达式行为变化。
1、在任意文本文件中输入一段正则表达式，例如 /a(b+)?c/g。
2、将光标置于正则字符串内部（如置于 b+ 位置）。
3、按下快捷键 Cmd+Shift+P（macOS）调出命令面板。
4、输入并选择 Regex RR: Toggle Inline View。
三、使用独立可视化编辑器
独立编辑器提供完整画布，支持拖拽调整节点位置、展开折叠子表达式、查看各捕获组的匹配范围，适用于复杂正则的构建与验证。
1、在命令面板中执行 Regex RR: Open Visual Editor。
2、在弹出的新编辑器标签页中，粘贴目标正则表达式至顶部输入框。
3、在下方“Test String”区域输入待匹配的示例文本，例如 abbbc。
4、点击右上角 Run 按钮，画布将生成带颜色编码的节点图，其中 绿色节点表示成功匹配，红色节点表示失败分支。
四、导出可视化结构图
导出功能可将当前正则的解析树保存为 SVG 文件，便于协作评审或文档嵌入，保留所有分组命名、量词标注与匹配状态标识。
1、确保已在独立可视化编辑器中完成正则与测试文本的配置。
2、点击编辑器右上角的三个点菜单图标。
3、选择 Export as SVG 选项。
4、在弹出的保存对话框中指定路径，文件名将自动添加 .svg 后缀。
