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的扩展程序，让我实现这样的内容：

like this

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

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

vscode代码大纲 https://github.com/patrys/vscode-code-outline ，我喜欢这个扩展名，除非它对我的语言不起作用。 Example image for a .js file
显示功能 https://marketplace.visualstudio.com/items?itemName=qrti.funclist
Sourcecookifier 用于记事本++（可以做我想要的但显然是用于记事本++）

我喜欢第二个扩展（显示功能），因为它可以在vscode / settings文件中轻松自定义。您可以从设置中定义自己的正则表达式。但是，它不是在编辑器中固定的大纲视图中。现场也不令人耳目一新。

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

如果有人能指出正确的方向，我们将非常感激。我已经尝试了一些代码大纲扩展的文档，但我认为这对我没有任何意义。

PS：关于StackOverflow的第一篇文章，请告诉我是否应该添加/更改。

提前致谢。

Answer 1

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

The CodeMap extension，基本上是我正在寻找的扩展程序。

我在https://github.com/oleg-shilo/codemap.vscode/wiki/Adding-custom-mappers

上关注了他们的指南

我创建了一个自定义专用映射器＆＃34; mapper_X.js＆＃34;将其保存到任意位置，并在我的vscode用户设置中粘贴"codemap.X": "mylocation\\mapper_X.js",（如github指南中所述）。然后我打开一个新文件，将其保存为untitled.X并输入一些语法（我的问题中的示例代码），现在我可以看到我的自定义大纲。

从下面的结果链接中可以看出，我（故意）没有定义我的映射器来考虑任何其他情况。我的映射器仍然处于初期状态。我以为在忘记发布这个问题之前我还是分享了我的发现...

result

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

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

2 个答案: