monaco-editor如何设置代码折叠

Monaco Editor 是一个轻量级的 JavaScript 代码编辑器，它提供了丰富的 API 来定制编辑体验，包括代码折叠功能。要设置代码折叠，你需要使用 Monaco 的 `monaco.editor.setModelMarkers` 方法和特定的标记类型。

以下是设置代码折叠的基本步骤：

1. 首先，确保你已经加载了 Monaco Editor 和相关的语言模型。你可以从 Monaco 的 CDN 引入，例如：

<script src="https://unpkg.com/monaco-editor@0.27.0/min/vs/loader.js"></script>

2. 创建编辑器实例并加载代码：

const editor = monaco.editor.create(document.getElementById('container'), {
    value: '你的代码内容',
    language: 'your-language'
});

3. 定义折叠标记类型（foldMarker）：

monaco.languages.typescript.setDiagnosticsOptions({
    noSemanticValidation: true, // 忽略语法检查，仅用于演示代码折叠
});

// 定义折叠标记类型
const foldingRangeType = 'comment';

4. 使用 `monaco.editor.setModelMarkers` 设置标记：

const markers = [
    {
        startLineNumber: 1,
        startColumn: 2, // 从第二列开始折叠
        endLineNumber: 10, // 到第10行结束
        endColumn: 1, // 包含本行
        type: foldingRangeType,
        isFolded: true, // 初始折叠状态
    }
];

editor.setModelMarkers(editor.getModel(), foldingRangeType, markers);

5. 当需要显示或隐藏折叠区域时，你可以监听编辑器的 `onDidChangeModelContent` 事件，并更新折叠状态：

editor.onDidChangeModelContent(() => {
    editor.updateModelMarkers(foldingRangeType, markers);
});