如何在vscode中实现自己的代码大纲布局？

Question

我正在寻找 Visual Studio Code (vscode) 中的扩展，我可以在其中定义自定义代码大纲。本质上，以树状方式列出我的所有函数/定义。

假设我使用一种简单的语言，如下所示：

begin foo1 arriving procedure
  move into queue1
  print queue1
  send to foo2 
end

begin foo2 arriving procedure
  move into queue2
  print queue2
  send to foo3
end

我想知道 vscode 是否有一个扩展可以让我实现这样的东西：

如果可以点击就更好了。导航/转到定义，并且在代码更复杂的情况下可以扩展。

到目前为止我发现了什么。

1. vscode代码大纲 https://github.com/patrys/vscode-code-outline ，我喜欢这个扩展，但它不适用于我的语言。

2. 显示功能 https://marketplace.visualstudio.com/items?itemName=qrti.funclist

3. 用于记事本++的Sourcecookifier（可以做我想做的事，但显然对于记事本++）

我喜欢第二个扩展（显示函数），因为它可以在 vscode/设置文件中轻松自定义。您可以从设置中定义自己的正则表达式。但是，它并不是固定在编辑器的大纲视图中。直播也不清爽。

我也喜欢第一个扩展，因为它位于树视图中，但我似乎不知道如何以及在哪里修改设置以实现所描述的布局。

如果有人能指出我正确的方向，我将不胜感激。我已经尝试过使用代码大纲扩展的文档，但我认为这对我来说没有任何意义。

PS：在 StackOverflow 上的第一篇文章，如果有什么我应该添加/更改的，请告诉我。

提前致谢。

Answer 1

好的，我的请求现在已经解决了。

CodeMap 扩展，基本上就是我正在寻找的扩展。

我遵循了他们的指南 https://github.com/oleg-shilo/codemap.vscode/wiki/Adding-custom-mappers

我创建了一个自定义专用映射器“mapper_X.js”，并将其保存到任意位置，并在我的 vscode 用户设置中粘贴了

"codemap.X": "mylocation\\mapper_X.js",

（如 github 指南中所述）。然后我打开一个新文件，将其另存为 untitled.X 并输入一些语法（我的问题中的示例代码），现在我可以看到我的自定义大纲。

从下面的结果链接中可以看出，我（故意）没有定义我的映射器来考虑任何其他情况。我的映射器仍处于起步阶段。只是想在我忘记发布这个问题之前分享我的发现......

Answer 2

在最新版本的 VS Code 中，有一个 API 用于填充大纲视图，而无需依赖第三方扩展（您需要自己编写的扩展除外）。

这可以通过注册

DocumentSymbolProvider

来实现。

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.languages.registerDocumentSymbolProvider(
            {scheme: "file", language: "swmf-config"}, 
            new SwmfConfigDocumentSymbolProvider())
    );
}

这允许大纲视图中的平面结构或树形结构（两者不能混合）。

class SwmfConfigDocumentSymbolProvider implements vscode.DocumentSymbolProvider {
    public provideDocumentSymbols(
        document: vscode.TextDocument,
        token: vscode.CancellationToken): Promise<vscode.DocumentSymbol[]> {
        return new Promise((resolve, reject) => {
            let symbols: vscode.DocumentSymbol[] = [];
            for (var i = 0; i < document.lineCount; i++) {
                var line = document.lineAt(i);
                if (line.text.startsWith("#")) {
                    let symbol = new vscode.DocumentSymbol(
                        line.text, 'Component',
                        vscode.SymbolKind.Function,
                        line.range, line.range)
                    symbols.push(symbol)
                }
            }
            resolve(symbols);
        });
    }
}

有关在大纲视图中给出树结构的小型完整工作示例，请参阅 https://github.com/svaberg/SWMF-grammar

Answer 3

现在我们有 https://marketplace.visualstudio.com/items?itemName=Gerrnperl.outline-map&ssr=false#overview

我更喜欢这个，因为

• 其侧边栏位于右侧
• 双向同步滚动
• 显然是自定义规则。