在之前的文章《4 步为 Monaco Editor 添加自定义语言支持》中，我们已经学会了如何使用 monaco-editor 来实现一个支持自定义编程语言的编辑器，但是作为一个标准的代码编辑器，我们还需要它支持代码块折叠功能，这样在编辑内容比较多的代码文件时，可以方便的将其中一些代码块折叠起来，使得在阅读代码时更容易理解整体代码结构。

这一次我们就来看看如何给 Monaco Editor 增加代码块折叠功能。

官方示例

在 Monaco Editor Playground 的 Folding Provider Example 示例中，可以看到如何给一个自定义语言添加代码折叠支持：

monaco.languages.registerFoldingRangeProvider("foldLanguage", {
    provideFoldingRanges: function (model, context, token) {
        return [
            // comment1
            {
                start: 5,
                end: 7,
                kind: monaco.languages.FoldingRangeKind.Comment,
            },
      // ...
    ]
  }
});

可以看到，只需要在注册自定义语言后，再注册一个 foldingRangeProvider …

阅读全文 »