求助：ngx-codemirror的SQL折叠gutter功能无法正常使用

尝试在CodeMirror编辑器中为SQL查询启用foldgutter功能，但该功能无法正常工作。

解决方案 #

1. 补全必要的模块与样式导入 #

SQL折叠功能依赖特定的CodeMirror插件，需要在组件文件中导入相关模块及样式：

import { Component } from '@angular/core';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import 'codemirror/mode/sql/sql';
// 新增折叠相关插件导入
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/sql-fold';
// 导入折叠 gutter 样式
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/fold/foldgutter.css';

2. 修正编辑器配置 #

在编辑器配置中明确启用foldGutter，并指定对应的 gutter 项：

export class AppComponent {
  code = `SELECT *
FROM users
WHERE age > 18
AND status = 'active'
ORDER BY created_at DESC`;

  config = {
    mode: 'text/x-sql',
    lineNumbers: true,
    foldGutter: true,
    // 配置 gutter 显示项，必须包含折叠 gutter
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
    // 添加快捷键支持折叠/展开
    extraKeys: {
      "Ctrl-Q": (cm) => cm.foldCode(cm.getCursor())
    }
  };
}

3. 确认模板配置正确性 #

确保模板中的编辑器组件绑定了正确的配置和数据：

<ngx-codemirror [(ngModel)]="code" [config]="config"></ngx-codemirror>

4. 检查依赖版本兼容性 #

确认@ctrl/ngx-codemirror与codemirror版本匹配，建议使用官方推荐的稳定版本组合，避免版本不兼容导致功能异常。

完成上述配置后，foldgutter功能即可正常工作：点击编辑器左侧 gutter 上的折叠图标，或使用Ctrl+Q快捷键，就能折叠/展开对应的SQL代码块。

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